vue项目中使用iconfont
程序员文章站
2024-02-16 23:22:58
...
首先创建自己的iconfont项目
设置步骤如下:
其中Font Family的值默认就可以,之后添加一些图标到自己的项目中。
下载iconfont到本地
下载到本地之后解压选中下面几个文件
在项目中建立引用
现在项目中建立一个iconfont的文件,把上面几个文件复制到这个文件中:
之后再建一个样式文件,用于项目中使用
同时在入口文件index.scss中引用
到此,整个引用的顺序已经完成,下面进行iconfont.scss中的样式设置:
@font-face {
font-family: "iconfont";
src: url('./iconfont/iconfont.eot');
/* IE9*/
src: url('./iconfont/iconfont.eot#iefix') format('embedded-opentype'),
/* IE6-IE8 */
url('./iconfont/iconfont.woff') format('woff'),
/* chrome, firefox */
url('./iconfont/iconfont.woff2') format('woff2'),
/* chrome, firefox */
url('./iconfont/iconfont.ttf') format('truetype'),
/* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('./iconfont/iconfont.svg#iconfont') format('svg');
/* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ci-dingdan:before {
content: "\e8ae";
}
.ci-gengduo:before {
content: "\e8af";
}
这个路径是你引用文件的路径:
除了引用字体库,还要将其中的iconfont.css
中定义的before
伪元素全部复制到自己的scss
文件中。
是你从下面这个文件中复制过来的
这样就可以在其他文件中使用了,使用规则如下:
<span class="iconfont ci-gengduo"></span>
// 你会发现所用的引用都要加上iconfont 很麻烦
换一下iconfont.scss中的内容便可:
在使用时不要加添加iconfont了:
<span class="ci-gengduo"></span>
上一篇: 统计学习方法笔记七----决策树