以第一个链接网站中的字体为例
选择您需要的图标,点击右下角下载
继续点击右下角-点击下载
后面下载的文件通常就是这些基本组件
将fonts文件夹复制到项目根目录
打开CSS文件
将代码复制到自己的一个css文件中,然后html引用,注意红笔圈出的地方css3 图标库,可以参考单独的html对应的css
配置路径信息-找到css中的font文件夹,找到该文件夹下的字体文件
设置图标样式,给一个统一的类名,全局调用,比如我这里设置的所有i标签都给一个图标类名
类样式可以根据自己的项目写一些公共的
这里可以使用我这里直接复制的腾讯课堂的代码,所以这里的代码略有不同。 如果不同,可以用图标的名称来设置不同的类名,然后进行微调。
对应的icon类名,参考html icon标签的class即可
例如:
我想在这里使用第一条消息的图标,并在html中引用它css3 图标库,如下所示:
另外我在css中设置了它的单独样式:
好了,你完成了!
对了,还有与ie奶奶的兼容性问题。 请参考以下两篇文章进行整理:fontawesomeie7兼容性问题:CSSExpression使用总结:
-------------------------------------------------- ----------------------------------- 严重的分割线! ! ! -------------------------------------------------- -------------------------------------------------- ----------------------