Font Awesome 图标字体库最简单教程 - 使用方法！_CSS学习

当前位置：网站建设 > 技术支持

资料来源：网络整理时间：2023/3/4 0:57:14 共计：3648 浏览

Font Awesome 图标字体库不多介绍，都知道现在大多数网站前端陆续使用各种图标字体，而Font Awesome又是汉化比较好的一款。

下面直接讲解Font Awesome图标字体库的使用：

1、下载图标字体，然后引用（也可以直接官网给的链接，打开网址学习即可看到）

http://fontawesome.dashgame.com/

不下载字体库直接引用：http://fontawesome.dashgame.com/#getstart

2、图标字体代码一般是（仅针对Font Awesome）：

//这就是QQ图标字体使用代码

//这个是微信的字体代码

3、如果你需要引用其它图标，该怎么办呢？

上图就是截图官网里的图标了，这时候如果要引用第一个图标“帽子”该怎么办呢？

答案： i标签属性中比如带 fa，以及加fa-

同理： 就是第二行第一个，三横线了

4、下一步如何做链接或者颜色变化，以及图标大小呢？

<a href="#">：12345678</a> 这句代码实现的效果如下图：

此时，图标不是图片，不管颜色、尺寸、大小都会跟着后面的QQ号数字一起变化！

所以，此时对a标签内任何属性操作，都会同步到图标上，比如加颜色，那么图标也是同步，比如给字体加字号，那么图标的字号也会同步放大！

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。