摘要：网页小图标到处可见，如果一个网页都是干巴巴的文字和图片，而没有小图标，会显得非常简陋。直接看代码链接链接链接链接得出的结果就是其他应用还有其他更加复杂一点的应用，包括固定宽度浮动反转旋转叠加图标等。
引言
奥森图标（Font Awesome）提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ，颜色，阴影。
网页小图标到处可见，如果一个网页都是干巴巴的文字和图片，而没有小图标，会显得非常简陋。下面的小图标，你也可能经常会看到的，如图所示：
你可能说——“我们用的都是彩色的，不是黑白的”——别着急，下面会讲到。因为它们也可以变为彩色的。
黑白的也好，彩色的也罢，如果用传统的“css + 图片”的方式来制作这些icon，我估计你至少得雇佣一个专业的设计师吧。一般的程序猿，包括前端程序猿，估计只能去搜索了，不会自己拿ps画。
一般情况我们都会在网上搜索一些相关的图片，比如黑白图片的！！
但是问题又来了，如果你搜索来的是黑白的，现在也用黑白的，后期网站变化主题怎么办？你搜出来的是16 16的，要有个页面需要 32 32的怎么办？如果沿着这个方向考虑，你会发现，自己将在这上面耗费大量资源和精力。
但是如果我告诉你，有一个东西，它已经为你准备了将近500个常用icon图标（还在不断更新），能大能小，能随便修改颜色，完全开源，完全免费，你会不会心动？如果你非常着急，先去百度一下“font-awesome”，再来继续读文章不迟。
应用font-awesomefont-awesome当前的版本是4.2.0，咱们就直接用这个版本的来说。
先看看它的好处：
去http://www.thinkcmf.com/下载，解压之后，应该能看到“css”和“font”两个文件夹。css文件夹中存放着css文档，font文件夹中存放在着适用于不同浏览器的字体文件。其中，css文件夹中可以只保留 font-awesome.min.css 和 font-awesome-ie7.min.css 两个文档，其他的可以删掉。结构应该如下：
将整理好的文件夹加入到你的网站，新建一个测试页面 demo.html，将css文件夹中的两个css文件，引入到页面。
如上代码，如果是IE浏览器，需要引入 font-awesome-ie7.min.css ，因为fontAwesome支持IE7+浏览器的。
引用CSS文件之后，接下来就可以使用图标了。例如，我要在页面中显示一个“链接”的图标，我可以这么写：
链接
此时页面将显示：
显示是显示出来了，那么对应链接的这个css类“fa-link”我是从哪里找来的呢？
答案非常简单！进入官网的icon页面，里面有所有的icon的css类，就可以找到你想要的那个图标的css类了。
（注意，在“fa-link”前面还要加入一个“fa”类，例如 ）
设置大小和颜色学会了以上的简单使用，设置颜色和大小非常简单，只要你会用css设置文字的颜色和大小就行。直接看代码：
链接
链接
链接
链接
得出的结果就是：
fontAwesome还有其他更加复杂一点的应用，包括固定宽度、浮动、反转、旋转、叠加图标等。
官网上讲解的更好，我就不再这里重复描述了，可以去http://www.thinkcmf.com/font/...查阅这些应用的例子。
综合实例html代码：
实现结果如图所示：
demo下载请点击这儿
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111154.html
摘要：盒子的宽度设置固定宽度的情况在盒子模型中，我们设置的宽度都是内容宽度，不是整个盒子的宽度。这样我们改四个中的其中一个，都会导致盒子宽度的改变。包裹内容的情况这种情况下比较简单，盒子的宽度将随着内容宽度的增加而增加。 1.引言 从这一节开始，我们就进入本系列的第三部分——css呈现。本部分将描述css在页面的几种布局和呈现的特性。包括两类：文字、块。第一类——文字。这部分相对比较简单一些...
摘要：那么，在我们当下的前端开发中，最常见的图标解决方案有哪些呢大概是三种，图片和。 showImg(https://segmentfault.com/img/remote/1460000006774999);A picture is worth a thousand words, 一图胜千言。 没错，从 Web 诞生的那天开始，图标就成为视觉层面不可或缺的一个元素，在一个 Web 页面中，...
摘要：那么，在我们当下的前端开发中，最常见的图标解决方案有哪些呢大概是三种，图片和。 showImg(https://segmentfault.com/img/remote/1460000006774999);A picture is worth a thousand words, 一图胜千言。 没错，从 Web 诞生的那天开始，图标就成为视觉层面不可或缺的一个元素，在一个 Web 页面中，...
摘要：本篇博文将带大家发现新大陆教你打造炫酷的个人博客站点阅读本文前建议先行阅读本人另外一遍基础博文关于搭建个人博客基础篇目录配置博客基本信息配置主题优化主题上传头像并设置头像旋转效果设置个人社交图标链接设置设置酷炫动态背景设置主题语言设置网站设 本篇博文将带大家发现新大陆,教你打造炫酷的个人博客站点. 阅读本文前建议先行阅读本人另外一遍基础博文关于Hexo搭建个人博客(基础篇) 目录 配...
摘要：文中的一些方法来源于我的有出售请大家自行拷贝粘贴颜色要使用代词加数字大小形式数字规格颜色变量不许由或者方法计算得出项目颜色基于配色基础色库设计师都会配出来项目色库需要项目去改变设计师文字和前端页面开发者文字必须为同一类 文中sass的一些方法 来源于我的sassstd zhilizhili-mei zhilizhili-ui npm 有出售 请大家自行拷贝粘贴 showImg(ht...
阅读 3114·2021-11-24 09:39
阅读 3599·2021-11-22 09:34
阅读 983·2021-11-15 11:38
阅读 1613·2021-10-11 10:58
阅读 3636·2021-10-08 10:04
阅读 4518·2021-08-11 11:17
阅读 954·2019-08-29 13:58
阅读 2427·2019-08-28 18:18
