iconfont 中图标以及字体库在页面中的引用

一、引用字体

1、打开 iconfont-阿里巴巴矢量图标库，找到字体库，选择某个字体，里面有粗细选择，点击下载

2、将下载好的文件解压放置到vue项目中 assets 下的 font文件夹下

3、在全局中引入 styles 下的 index.scss

font-family: 自定义名字

@font-face {font-family: 'alibaba_light';src: url("./../assets/font/Alibaba_PuHuiTi_2.0_45_Light_45_Light.ttf");font-weight: normal;font-style: normal;
}@font-face {font-family: 'alibaba_regular';src: url("./../assets/font/Alibaba_PuHuiTi_2.0_55_Regular_55_Regular.ttf");font-weight: normal;font-style: normal;
}@font-face {font-family: 'alibaba_medium';src: url("./../assets/font/Alibaba_PuHuiTi_2.0_65_Medium_65_Medium.ttf");font-weight: normal;font-style: normal;
}

4、在需要的页面中调用

<style lang="scss">
.main{font-family: 'alibaba_regular';
}
</style>

二、引用图标

1、上传图标

A、根据项目不同创建不同的项目

B、将设计里的图标或者iconfont里的图标，以 svg 的格式，并且不同的命名，添加或上传到该项目里

C、下载至本地

2、将下载好的文件放置到vue项目中 assets 下的 iconfont 文件夹下

3、在全局中引入 styles 下的 index.scss

@import './font/iconfont.css';

4、在需要的页面中调用，class中加 iconfont 和图标名称，style可以设置图标大小和颜色

<i class="iconfont icon-ava" style="color:#70C1A0;font-size: 90px;" />

希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~

iconfont 中图标以及字体库在页面中的引用相关推荐

网页html中嵌入特殊字体6,网页html中嵌入特殊字体-此法利于SEO
通常网页上不能使用一些特殊字体,否则浏览者可能无法正确浏览到,虽然我们可以通过图片,flash.SIFR等技术来实现网页使用特殊字体, 但是这都有个严重的缺点:不利于SEO. 下面介绍一种非常有利于S ...
在网页设计中，引导页是所有页面中的重中之重，引导浏览者很快进入各栏目页面，是一个网站的灵魂所在。
在网页设计中,引导页是所有页面中的重中之重,引导浏览者很快进入各栏目页面,是一个网站的灵魂所在.
web.config中namespace的配置（针对页面中引用）
web.config中namespace的配置(针对页面中引用) 1,在页面中使用强类型时: @model GZUAboutModel @using Nop.Admin.Models//命名空间(注意 ...
html如何调用特殊字体,怎样在页面中引入特殊字体呢？
让网页自由引入中文字体成为可能,可能有人会说直接引入字体包,在样式中设置font-family:"XXX"不就好了吗?超级简单呢.. 那我们一起看看字体包的大小(该实例中使用:喜鹊 ...
java安卓字体_Android中添加外部字体库和竖直排列字体
一.在Android开发中会遇到系统提供的字体并不能满足自己对字体的设计需要,这就需要引进外部字体库了.下面简述一下如何引入外部字体库. 1>在自己工程文件目录下新建一个assets文件夹,在a ...
项目开发中引入外部字体库
前端web项目下载字体库(如:方正兰亭中黑_GBK.ttf) 全局引入 @font-face {font-family: "方正兰亭中黑_GBK";src: url(" ...
Android AutoSize屏幕适配中图标及字体放大的问题解决
现象: 项目接入Android AutoSize屏幕适配框架,项目本身主界面是横屏操作的界面.测试中用户反馈在vivo x27的手机或者其他机型也会出现(没测试出来)横屏后所有的图标及字体都放大. 原 ...
php中使用mysql_fetch_array输出数组至页面中展示
用的是CI框架,很好的MVC结构在Model层 1 public function showProteinCategory(){ 2 $sql = "SELECT DISTINCT pro ...
回发或回调参数无效。在配置中使用 enableEventValidation=true或在页面中启用了事件验证...(转)...
原文:http://blog.csdn.net/zhangyj_315/archive/2009/03/03/3952313.aspx 回发或回调参数无效.在配置中使用 <pages enabl ...

iconfont 中图标以及字体库在页面中的引用

一、引用字体

二、引用图标

iconfont 中图标以及字体库在页面中的引用相关推荐

最新文章

热门文章