Font Awesome图标字体下载及安装引用方法

1、场景介绍

网页小图标到处可见、如果一个网页都是干巴巴的文字和图片、而没有小图标、会显得非常简陋、黑白的也好、彩色的也罢、如果用传统的“css 图片”的方式来制作这些icon、我估计你至少得雇佣一个专业的设计师吧、一般的程序猿、包括前端程序猿、估计只能去搜索了、不会自己拿ps画

但是问题又来了、如果你搜索来的是黑白的、现在也用黑白的、后期网站变化主题怎么办？你搜出来的是16 * 16的、要有个页面需要 32 * 32的怎么办？如果沿着这个方向考虑、你会发现、自己将在这上面耗费大量资源和精力

但是如果我告诉你、有一个东西、它已经为你准备了将近500个常用icon图标（还在不断更新）、能大能小、能随便修改颜色、完全开源、完全免费、这就是今天主角Font Awesome

2.、Font Awesome怎么用

font-awesome当前的版本是4.6.3、咱们就直接用这个版本的来说、首先到font awesome 官网或者font awesome github下载资源、解压之后、应该能看到 “css” 和 “font” 两个文件夹、css文件夹中存放着css文档、font文件夹中存放在着适用于不同浏览器的字体文件、结构应该如下

3、引入css文件

如上图在整理好的文件夹加入 index.html、然后引入到页面就可以正常使用了

<link rel="stylesheet" href="css/font-awesome.min.css">

4、Html用法以及设置大小

上面引入了之后就可以简单的使用了、设置颜色和大小也非常简单、只要你会用css设置文字的颜色和大小就行、直接看代码

<ol class="grid">
    <li class="grid__item">
        <button class="icobutton icobutton--thumbs-up" style="font-size:24px;">
            <span class="fa fa-thumbs-up">345赞</span>
        </button>
    </li>
    
    <li class="grid__item">
        <button class="icobutton icobutton--microphone">
            <span class="fa fa-dollar">打赏</span>
        </button>
    </li>
</ol>

更多图标大家可以上 Font Awesome Icons 去找、虽然是英文、但我们只要看图标就好了、然后复制相应的 class 名称就好了、非常方便、下面我把上面介绍的 Demo 分享给大家、大家可以下载先感受一下

font awesome字体下载下载链接: font awesome4.6下载 密码: c6mp