Font Awesome图标字体下载及安装引用方法
2016-06-22 14:02:27  By: dwtedx

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文件夹中存放在着适用于不同浏览器的字体文件、结构应该如下

font awesome下载


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

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+