1.打开阿里图库,创建一个项目,再去寻找自己想要的图标,最后下载至电脑。
2.打开下载的文件包,如下图
3.将里面的部分文件拷贝至你的项目中,在static 目录下创建一个文件夹fonts,如下图
4.打开iconfont.css,往里面添加代码如下,
[class^="icon"], [class*=" icon"]/*这里有空格*/
{ font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
整体为下图
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1530695918383'); /* IE9*/
src: url('iconfont.eot?t=1530695918383#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
url('iconfont.ttf?t=1530695918383') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1530695918383#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;
}
[class^="icon"], [class*=" icon"]/*这里有空格*/
{ font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
.icon-area:before { content: "\e683"; }
.icon-rectangle:before { content: "\e603"; }
.icon-rubber:before { content: "\e67f"; }
.icon-circle:before { content: "\e608"; }
.icon-line:before { content: "\e605"; }
.icon-faced:before { content: "\e649"; }
5.在项目中运用
在main.js中引入
import 'static/fonts/iconfont.css'
html里面这样使用它
<i class="ico icon-rubber">这样我们就可以自定义自己想要的各种图标了