使用fontawesome图标

现在fontawesome越来越丰富,使用也非常方便。Font Awesome 字体提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。下面我们来说说如何使用fontawesome图标吧。

一、下载

二、引用CSS

引用下载文件中的CSS

1
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

三、使用

使用类似以下方式来输出图标

1
<span><i class="fa fa-link"></i>链接</span>

比如上述代码就会输出:链接
如果想用其他图标就更换上述代码中:fa-link。查询官网中众多图标找到你想要的换上就可以了。

四、进阶

可以通过CSS对颜色,大小,背景等进行调整,具体查看下面示例

1
2
3
4
5
6
7
<span style="font-size:12px;"><i class="fa fa-link"></i> 链接</span>
<br />
<span style="font-size:20px;"><i class="fa fa-link"></i> 链接</span>
<br />
<span style="color:red"><i class="fa fa-link"></i> 链接</span>
<br />
<span style="color:white;background-color:#003399;"><i class="fa fa-link"></i> 链接</span>

上述代码输出结果为:
链接

链接

链接

链接

相信看完示例我们都会对fontawesome图标的使用有了一个大致的认识了吧!

给我留言