Font Awesome 图标字体库最简单教程 - 使用方法!

老白 6个月前 311浏览 0评论

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

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

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

http://fontawesome.dashgame.com/

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

2、图标字体代码一般是(仅针对Font Awesome):

<i class="fa fa-qq"></i> //这就是QQ图标字体使用代码

<i class="fa fa-weixin"></i> //这个是微信的字体代码

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

Font Awesome 图标字体库最简单教程 - 使用方法! CSS学习 第1张

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

答案:<i class="fa fa-mortar-board"></i> i标签属性中比如带 fa,以及加fa-

同理:<i class="fa fa-navicon"></i> 就是第二行第一个,三横线

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

<a href="#"><i class="fa fa-qq"></i>:12345678</a> 这句代码实现的效果如下图:

Font Awesome 图标字体库最简单教程 - 使用方法! CSS学习 第2张

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

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





评论