在公司项目或者个人建站时经常会有这么一个需求,就是在网站的底部以图标的形式加入自己的某些常用社交联系方式,比如 QQ、微信、微博、Twitter 等等,如果采用传统切图的方式去制作这些图标会有两个缺点:
1. 前端工程师有可能不懂美工切图的相关技术,而有些小公司又没有美工这个职位,这样自己找素材就会十分麻烦
2. 传统图片没法灵活地调整尺寸,比如当图片放大后里面的内容就会变得很模糊,无法适应比较复杂的需求
使用 font awesome 这套开源图标库就能很好解决以上两个问题。使用 font awesome 的具体步骤:
1. 到官网下载相关压缩包
2. 解压后得到四个文件夹,把 CSS 文件夹中的 font-awesome.css 引入到你的项目 css 目录下。
还有一点十分重要!一定要把 font 文件夹放到你项目 css 文件夹的同级目录下,否则到时不会正确显示图标,网上很多教程都没提到这点
3. 在你的 html 文件中引入 font-awesome.css 就可以直接使用了
测试:
在 html 随意位置添加:
- 1 < span class = "fa fa-qq" > </span>/
页面会正常显示出一个 qq 图标,说明 font awesome 正常工作
你还能添加相关的类,比如 fa-qq-lg 增大图标的尺寸,相关方法可以去官网上看具体文档
来源: http://www.bubuko.com/infodetail-2435477.html