推荐一个用于网页的矢量图标网站

点击这里进入网站

这个网站提供了大量的可以用于网页的矢量图标代码, 比如本博客顶部导航条的图标就来源如此,关键在于这些图标属于字符,而不是图片,因此在大量使用图标的时候并不会造成网页加载速度变慢等问题,兼容性也很强。

使用的方法很简单,只需要在文本前面加上代码

<i class="fa [这里更改为图标代码]" aria-hidden="true"></i>[这里写文字]

随心所欲替换想要的图标,例如home图标就可以按照以下方式进行替换:

<i class="fa fa-home" aria-hidden="true"></i> 首页

显示出来的效果就会变成:首页

 

也可以使用「fa-automobile」使图标变成 汽车

或者 WIFI 、 图表 、 雪花 、 齿轮……

 

除此之外,也可以通过添加「fa-spin」类的方法让图标转起来,比如下面这行代码

<i class="fa fa-gear fa-spin" aria-hidden="true"></i>旋转齿轮

显示出来的效果就会是:旋转齿轮

通过替换图标代码也可以变成:旋转雪花 或者是诡异的旋转汽车。当然,这样看起来会很奇怪  ,所以并不推荐在非对称的圆形图标后面添加「fa-spin」类。

体的图标代码见fontawesome网站所示,图标叠加等更多的高级玩法以及使用说明可以在该网站底部找到。有兴趣的站长们可以尝试一下。



点赞

发表评论