900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > Font Awesome 图标字体库最简单教程 – 使用方法! – CSS – 前端 css3支持ie10

Font Awesome 图标字体库最简单教程 – 使用方法! – CSS – 前端 css3支持ie10

时间:2023-08-19 09:03:30

相关推荐

Font Awesome 图标字体库最简单教程 – 使用方法! – CSS – 前端 css3支持ie10

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

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

/

不下载字体库直接引用:/#getstart

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

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

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

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

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

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

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

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

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

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。