码迷,mamicode.com
首页 > Web开发 > 详细

使用font awesome制作网站常用社交工具联系方式图标

时间:2017-12-21 12:09:37      阅读:220      评论:0      收藏:0      [点我收藏+]

标签:无法   自己   测试   就是   说明   网站   div   内容   项目   

在公司项目或者个人建站时经常会有这么一个需求,就是在网站的底部以图标的形式加入自己的某些常用社交联系方式,比如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增大图标的尺寸,相关方法可以去官网上看具体文档

使用font awesome制作网站常用社交工具联系方式图标

标签:无法   自己   测试   就是   说明   网站   div   内容   项目   

原文地址:http://www.cnblogs.com/NickyLi/p/8078520.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!