引入font-awesome图标字体轻松实现网页矢量图标

with 4 comments

网站开发中经常遇到使用图标元素,比较常规的方式使用PNG格式的图片,如果图标需求量很高且定制化需求很多时,采用font-awesome图标字体将会非常高效。

font-awesome图标字体

图标字体在应用时,本质上就是在页面上输出一个文字
网站存在大量图标需求是,采用font-awesome图标字体是非常方便的
font-awesome图标字体有以下优秀的特质:

矢量

轻量

高级

与传统PNG图片对比

font-awesome图标字体也不是在所有场景下都适用
比如:
网站中使用的图标不是很多
那么使用传统的png图片图标是比较有优势:

反之:
网站使用图标数量很多
并且有各种定制诉求(比如颜色、大小等等)
使用传统PNG则存在以下劣势:

font-awesome字体图标引入

源包下载:

http://www.fontawesome.com.cn/download/font-awesome-4.7.0.zip

这是font-awesome字体中文网站的官方下载地址
解压之后我们需要用到css、fonts这两个目录的文件
css目录下的css文件是用于我们网站引入的
font目录需要上传到网站目录下,由css文件内部引用的
特别注意目录结构,避免引用出错的情况
务必保持引用时与下载下来的目录结构一致

font-awesome字体图标使用

<!-- 引入css -->
<!-- 引用font-awesome.css也可以 -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">

<!-- 定义一个图标 -->
<!-- 通过设置CSS前缀fa和图标的具体名称,来把font-awesome字体图标放在任意位置 -->
<!-- **fa-weibo**是指新浪微博的图标名,其中**weibo**就是相应的图标真实名 -->
<i class="fa fa-weibo"></i>

<!-- 使用自带的样式控制 -->
<!-- 大小:使用 fa-lg (33% 递增), fa-2x, fa-3x, fa-4x, 或 fa-5x -->
<!-- 列表:使用 fa-ul and fa-li 轻松的替换无序列表中的默认图标 -->
<!-- 旋转:使用 fa-rotate-* and fa-flip-* -->
<!-- 动态:使用 fa-spin 使任意图标旋转,还可以使用 fa-pulse 使其进行8方位旋转 -->
<i class="fa fa-spin fa-rotate-90 fa-2x fa-weibo"></i>

<!-- 接受上级元素的样式控制 -->
<li style="font-size:16px;"><i class="fa-li fa fa-weibo"></i>新浪微博</li>

font-awesome字体图标相关

图标名称查询(最新的4.7.0版,收录了675个图标):

http://www.fontawesome.com.cn/faicons/

更多使用案例:

http://www.fontawesome.com.cn/examples/

还可以通过FontCreator工具打开font目录下的ttf文件进行查看

Responses
  1. 文章很专业,赞一个。。。。。。。。。

    Reply
    1. @麦钧德佛珠

      666佛珠,玩不起 玩不起

      Reply
  2. 任何事情都是需要坚持做下去的,而且很多时候效果都是要时间长了之后才能看到,每天做一点点的话,久了之后肯定会看到效果的,毕竟所有事情万变不离其宗,最后需要的都是那几样,最有效果的也是那几样

    Reply
  3. 支持博主

    Reply