1.什么是字体图标
字体图标是一个包含许多图标的字体库。
可以理解为一种特殊的字体,只不过里面包含的都是图标。

2.Font Awesome图标字体库
Font Awesome是目前最受欢迎最全面的图标字体库。
主要特点如下:
1)是一种字体,包含605个图标(截止4.5.0版本)
2)纯CSS控制,能够轻松定义图标的颜色、大小、阴影及任何CSS能够实现的效果。
3)无限缩放,矢量图标在任何尺寸下都一模一样
4)免费使用,包括商业和非商业项目
5)兼容多浏览器版本

下图是Font Awesome图标字体库种的部分图标,完整图标可访问官网查看:

3.Font Awesome使用示例
1)首先将整个字体库文件夹font-awesome放到工程项目中
2)在html页面的头部把font-awesome.min.css引进来

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

3)可在页面的任何地方使用<i>标签来使用Font Awesome字体图标。
方法为fa前缀+图标名字
如使用微信图标:

<i class="fa fa-weixin"></i>

4.font-awesome/css/font-awesome.css文件
文件的开头是这么一段语句:

@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face是CSS3中的一个模块,作用是把自定义的字体嵌入到你的网页。
该功能兼容多浏览器版本。

@font-face的语法如下:

@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}

font-family:自定义字体的名称,将被引入到相应元素的font-family
src: source:自定义字体的存放路径;format:自定义字体的格式,是为了兼容不同浏览器的识别。
font-weight:字体是否为粗体
font-style:字体是否为斜体

5.Font Awesome使用详解
1)放大图标尺寸
使用fa-lg, fa-2x, fa-3x, fa-4x, fa-5x 样式可以让图标相对于内容,尺寸增大33%,变成2倍,3倍,4倍,5倍。

<i class="fa fa-weixin fa-lg"></i>微信&nbsp;&nbsp;
<i class="fa fa-weixin fa-2x"></i>微信&nbsp;&nbsp;
<i class="fa fa-weixin fa-3x"></i>微信&nbsp;&nbsp;
<i class="fa fa-weixin fa-4x"></i>微信&nbsp;&nbsp;
<i class="fa fa-weixin fa-5x"></i>微信&nbsp;&nbsp;

2)固定宽度图标
使用 fa-fw 可以固定图标宽度

<i class="fa fa-weixin fa-fw"></i>

3)列表图标
使用fa-ul和fa-li可以方便地替换list列表默认图标
如下所示:

<ul class="fa-ul">
<li><i class="fa-li fa fa-weixin"></i>微信</li>
<li><i class="fa-li fa fa-weixin"></i>微信</li>
<li><i class="fa-li fa fa-weixin"></i>微信</li>
<li><i class="fa-li fa fa-weixin"></i>微信</li>
</ul>

4)有边框且漂浮的图标
使用fa-border与fa-pull-right或fa-pull-left组合使用,
可以方便地实现引用或文章图标。
如下所示:

<i class="fa fa-weixin fa-3x pull-left fa-border"></i>
微信是一款很火的社交软件,腾讯公司的产品,基于内容分享。

5)图标旋转动画
使用fa-spin可以让图标匀速旋转,使用fa-pulse可以让图标只按8个角度旋转。
如下所示:

<i class="fa fa-weixin fa-spin"></i>&nbsp;
<i class="fa fa-weixin fa-pulse"></i>

6)旋转,翻转图标
使用fa-rotate-*和fa-flip-*可以分别实现图标的旋转和翻转
如下所示:

<i class="fa fa-weixin fa-rotate-90"></i>&nbsp;
<i class="fa fa-weixin fa-rotate-180"></i>&nbsp;
<i class="fa fa-weixin fa-rotate-270"></i>&nbsp;
<i class="fa fa-weixin fa-flip-horizontal"></i>
<i class="fa fa-weixin fa-flip-vertical"></i>

7)叠加图标
要叠加多个图标,使用fa-stack设置容器。fa-stack-1x表示正常大小,
fa-stack-2x表示更大的图标,fa-inverse表示让图标反色。
如下所示:

<span class="fa-stack fa-1g">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-weixin fa-stack-1x"></i>
</span>

Font Awesome字体图标的更多相关文章

  1. Awesome图标 | 如何在某些编辑软件中使用Font Awesome字体图标

    文章目录 Font Awesome 字体图标 在某些编辑软件中使用 Font Awesome 字体图标 Font Awesome 为您提供可缩放矢量图标,它可以被定制大小.颜色.阴影以及任何可以用 C ...

  2. (22)bootstrap 初识 + Font Awesome(字体图标库)

    bootstrap作用就是简化布局 bootstrap是基于JQ的,所以内部代码使用的是jq语法 所以要使用bs,必须先倒入 1.head标签内倒入bs的css文件  <link rel=&qu ...

  3. 在nuxt中引入Font Awesome字体图标库

    介绍 在element-ui框架中提供了一些图标样式,但是种类比较少,所以在这里提供一套更完善的字体图标库Font Awesome(官方文档),下面就开始介绍如何在一个nuxt项目中使用这套字体库. ...

  4. CSS3使用Font Awesome字体图标的控件样例(按钮,工具栏,输入框)

    按钮上加入font awesome图标,用原生的input button标签无法实现,查看网上的只能通过<a><li></li></a>实现此功能,通过 ...

  5. CSS伪元素:before/CSS伪元素:before/:after content 显示Font Awesome字体图标:after content 显示Font Awesome字体图标

    HTML <a href="javascript:volid(0);"><i class="icon-table"></i> ...

  6. Font Awesome字体图标的 用法, 很简单

    http://fontawesome.dashgame.com/ 上面是 官网,  可下载,也可以CDN. 1...  加载 2...  用法

  7. 通过字体代替图片优化,如何使用Font Awesome字体图标?

    博客搬迁,给你带来的不便敬请谅解! http://www.suanliutudousi.com/2017/10/17/%E9%80%9A%E8%BF%87%E5%AD%97%E4%BD%93%E4%B ...

  8. iconfont字体图标的使用方法--超简单!

    我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐, ...

  9. iconfont阿里字体图标的使用方法

    我们在做web项目的时候,之前比较常用的是bootstrap,所以使用font awesome字体图标比较多,无意中在一个项目中接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常 ...

随机推荐

  1. hdu 2060

    ps:天了噜...WA了无数次...结果就是粗心了...先是YES和Yes的错,再后来是运算的错....想死 题意:先给出N,接下来是N个数据,给出a,b,c,分别是桌面剩下的球数,p的分数,q的分数 ...

  2. 5分钟学习maven(根据英文文档整理)

    英文原地址:http://maven.apache.org/guides/getting-started/maven-in-five-minutes.html 一.前提 需要懂得如何在计算机上安装软件 ...

  3. 您不能在64-位可执行文件上设置DEP属性?

    我是为dllhost.exe设置DEP时遇到了同样的情况.你需要选择64位系统对应的程序.64位系统:C:\Windows\SysWOW64\dllhost.exe32位系统:C:\Windows\S ...

  4. Interview----链表的倒数第K个元素

    这个题虽然简单,但是一定要细心,bug-free 能力很重要. 分析: 如果不知道链表的长度,可以采用双指针的方法,让一个指针先走 k 步,然后两个指针同时走, 前面的指针变成 NULL时, 第一个指 ...

  5. 通过一个Thinkphp完成多个项目

    1.单独取压缩包中的Thinkphp文件夹 2.在单独的项目内创建一个引入文件 3.通过浏览器访问该index.php 会创建相应的目录

  6. BZOJ 2982 combination

    lucas定理裸题. #include<iostream> #include<cstdio> #include<cstring> #include<algor ...

  7. HDU4897 (树链剖分+线段树)

    Problem Little Devil I (HDU4897) 题目大意 给定一棵树,每条边的颜色为黑或白,起始时均为白. 支持3种操作: 操作1:将a->b的路径中的所有边的颜色翻转. 操作 ...

  8. Linux基础入门(新版)(实验五至实验八)

    实验五 环境变量与文件查找 (环境变量的作用与用法,及几种搜索文件的方法)   一.环境变量   1.变量 (1)常变量与值是一对一的关系 (2)变量的作用域即变量的有效范围(比如一个函数中.一个源文 ...

  9. C#实现union以及lock的使用

    1.什么是Union类型数据 联合(Union)是一种特殊的类,一个联合中的数据成员在内存中的存储是互相重叠的.每个数据成员都在相同的内存地址开始. 分配给联合的存储区数量是“要包含它最大的数据成员” ...

  10. web程序调试方法

    1.火狐浏览器查看链接指向的后台方法(controller方法) f12 进入firebug 点击bug旁边的按钮 即第一排第二个按钮 将鼠标划到想要找的链接 在firebug中显示响应的后台跳转.d ...