`

element UI中使用awesome图标(非import方式)

ui 
阅读更多
不会用webpack,试了一下,下面的方式可以在icon中正常显示awesome图标

1、复制font-awesome.min.css到项目CSS目录中
2、复制FontAwesome.otf、fontawesome-webfont.eot、fontawesome-webfont.svg、fontawesome-webfont.ttf、fontawesome-webfont.woff到CSS同级的fonts目录中
3、在页面中引入css文件
<link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css" />

4、在style标签中增加一下代码
    [class^="el-icon-fa"], [class*=" el-icon-fa"] {
		display:inline-block;
		font-family:"FontAwesome"!important;
		font-style:normal;
		font-weight:normal;
		line-height:1;
		-webkit-font-smoothing:antialiased;
		-moz-osx-font-smoothing:grayscale
    };

5、在页面按一下方式引用图标
<el-button icon="fa fa-ban">取消</el-button>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics