给网站添加简洁漂亮的矢量放缩小图标 Font Awesome

现在搜索网上的网页随处可见漂亮的小图标，如果一个网站上网页都是干巴巴的文字，而没有小图标，就会显得非常枯燥乏味。你可以看到我现在的网页上是不是有不少漂亮的小图标为网站增色不少，都是 Font Awesome 的功劳。

但如果你还在使用传统的 “css+img” 的方式来制作这些 icon 就有点太 low 了，因为实际中你会发现很多问题，你先用的是黑白的图片，后期网站主题颜色变化了怎么办？你开始用的大小是 16*16 的，但要有个页面需要 32*32 的或其他尺寸怎么办？再顺着这个方向考虑下去，你会发现自己仅是做一张图片就将在这上面耗费大量资源和精力会得不偿失。

现在我告诉你有一个好东西就是矢量小图标，它已经为你准备了600多个常用 icon 图标（还在不断更新），能大能小，能随便修改颜色，完全开源，完全免费，你会不会心动？没错它就是我们今天介绍的主角：

Font Awesome 介绍

Font Awesome 是一款很流行的矢量小图标工具。随着 Bootstrap 的流行而逐渐被人所认识，现在 FontAwesome 不仅仅可以在 bt 上使用，还可以应用在各种 web 前端开发中。相对于传统的使用背景图片作为图标，字体图标主要是支持自适应、可以使用字体的各种特性（比如变色、变大变小、字体阴影等等）、减少数据加载、样式更容易定义等优点。

Font Awesome 特性

一个字体文件，同时拥有500+图标，想你所想。

完全免费，可以用于商业用途， SIL OFL 1.1 协议

不依赖JavaScript，因此无需担心兼容性，更快的载入速度。

因为是矢量图标，将使您的网站在视网膜级的高分屏上大放异彩。

无限的可扩展性，可伸缩矢量图形意味着每一个图标在任何大小看起来真棒，轻松的定义图标的颜色，大小，阴影，和任何与CSS相关的特性。

Font Awesome 使用

你只需要到 FontAwesome官网或中文网 下载压缩包然后解压到你的项目中。在你的 html 头部的 head 里面添加对相应的 font-awesome 的样式即可使用。

如需兼容IE浏览器，还可以使用 Font-awesome 的3.2.1版本。下载 font-awesome-ie7.css 或者是 font-awesome-ie7.min.css。然后在项目中引入该样式文件。

引用CSS文件之后，接下来就可以使用图标了。例如，我要在页面中显示一个“链接”的图标，我可以这么写：

显示为： 链接

FontAwesome 还有其他多功能的应用，包括固定宽度、浮动、反转、旋转、叠加图标等。官网上讲解的更好，我就不再这里重复描述了，可以去 FontAwesome官网 查看。

转载请注明链接地址：荐爱小站 » 给网站添加简洁漂亮的矢量放缩小图标 Font Awesome