css3 图标库-如何使用字体图标库

2023-08-29 0 2,415 百度已收录

以第一个链接网站中的字体为例

选择您需要的图标,点击右下角下载

继续点击右下角-点击下载

后面下载的文件通常就是这些基本组件

将fonts文件夹复制到项目根目录

打开CSS文件

将代码复制到自己的一个css文件中,然后html引用,注意红笔圈出的地方css3 图标,可以参考单独的html对应的css

配置路径信息-找到css中的font文件夹,找到该文件夹​​下的字体文件

设置图标样式,给一个统一的类名,全局调用,比如我这里设置的所有i标签都给一个图标类名

样式可以根据自己的项目写一些公共的

这里可以使用我这里直接复制的腾讯课堂的代码,所以这里的代码略有不同。 如果不同,可以用图标的名称来设置不同的类名,然后进行微调。

对应的icon类名,参考html icon标签的class即可

例如:

我想在这里使用第一条消息的图标,并在html中引用css3 图标库,如下所示:

另外我在css中设置了它的单独样式:

好了,你完成了!

对了,还有与ie奶奶的兼容性问题。 请参考以下两篇文章进行整理:fontawesomeie7兼容性问题:CSSExpression使用总结:

-------------------------------------------------- ----------------------------------- 严重的分割线! ! ! -------------------------------------------------- -------------------------------------------------- ----------------------

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 css3 css3 图标库-如何使用字体图标库 https://www.wkzy.net/game/181940.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务