vue引入iconfont字体图标的四种方式 |
您所在的位置：网站首页 › vue组件引用方式 › vue引入iconfont字体图标的四种方式 |
vue引入iconfont字体图标的四种方式
|
一、登陆阿里云矢量图标库，把需要的字体图标加入到自己的项目中 http://www.iconfont.cn/home/index 二、阿里云图标的四种方式（推荐第二种方式Font class引入，如果不考虑网络问题可以用在线引入的方式） 进入项目以后会看到阿里云可以选择三种方式进行导入图标  1、Unicode
Unicode的主要的特点 优势 兼容性最好，支持ie6+支持按字体的方式去动态调整图标大小，颜色等等劣势 不支持多色图标在不同的设备浏览器字体的渲染会略有差别，在不同的浏览器或系统中对文字的渲染不同，其显示的位置和大小可能会受到font-size、line-height、word-spacing等CSS属性的影响，而且这种影响调整起来较为困难使用方法： 第一步：在自定义的全局样式表中引入自定义字体 `font-face，并定义使用iconfont的样式
第二步：挑选相应图标并获取字体编码，应用于页面 2、Font classFont class具有如下特点： 兼容性良好，支持ie8+相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
1、进入项目以后选择 Font class 并下载到本地
下载到本地，解压以后的文件夹列表如下：
2、把下载的文件粘贴到自己的项目中，记得放在 static（或assects目录）文件目录下，因为字体图标也属于静态资源的一部分。
3、在main.js文件内全局引入阿里云字体图标 css，记得使用路径要正确，如果此时编译不正确，说明引用路径存在问题
为避免出现图标方框的情况，请对font进行初始化
在全局样式表中加入如下代码 // 阿里字体图标设置 .icon, .iconfont { font-family:"iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; }4、项目中使用字体图标，就可以使用了
支持多色图标了，不再受单色限制。支持像字体那样通过font-size,color来调整样式。支持 ie9+可利用CSS实现动画。减少HTTP请求。矢量，缩放不失真可以很精细的控制SVG图标的每一部分 使用方法： 拷贝下载项目，复制inconfont.js到资源文件目录下，并引入inonfont.js文件
在 index.html 中引入 iconfont.js 和 通用样式（引入一次就行） .icon { width: 1.5em; height: 1.5em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; cursor: pointer; margin-right: 1rem; }挑选相应图标并获取类名，应用于页面： 4、在线引入iconfont1、生成icon的在线css链接
2、在Vue项目中，引用在线css链接和新建css样式文件 （重点） 2.1 在Vue项目中创建iconfont.css文件，当然名字自定义。 [class^="icon-all"], [class*="icon-all"] { font-family:"iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }这里的 icon-all 是我自己起的icon前缀名。 2.2 引用阿里项目在线的css链接 在index.html里面引用的。放在前面
2.3 引用自己创建的css文件 2.4 接着就可以在项目中使用你的icon啦~~~~
|
【本文地址】