Font-Awesome最新版完整使用教程
何为Font-Awesome
Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
简言之:可伸缩的图标(矢量化),高度自定义(大小,颜色,阴影等)
优势
- 目前图标总数共有519个;
- 不依赖Javascript
- 矢量图形,无限缩放
- 免费,可用于商业
- CSS控制样式,自定义图标颜色,大小,阴影,一切可能实现的效果
- 支持retina显示(苹果retina 屏幕)
- 源于BS框架(最初的目标设计使用方向),现在基本支持主流的框架
- 兼容屏幕阅读器
- 图标用到的animation适用于IE8~9
缺点
- 不兼容IE7(不过现在用户使用主流浏览器都慢慢过渡到较新的..所以也不算奇葩)
获取Font-Awesome
使用方法
本地使用
下载完毕[font-awesome-4.3.0.zip]解压文件包括以下几个文件夹:
- CSS — 字体的引入,图标基础样式,大小等
- fonts — CSS需要引用字体文件夹,本地用户需要安装内部的
fontawesome-webfont.ttf(CSS引入字体) - less — 各种参数自定义的less文件,用来自定义Font awesome
- sass — 各种参数自定义的sass文件,用来自定义Font awesome
SASS和LESS都是CSS预处理器
把CSS文件夹和fonts复制到网站根目录(记得安装字体)即可使用,具体看代码示例
代码内含注释—应该很好理解
建议:用Chrome F12调试,一边查看注释一边折腾更妙
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font-Awesome完整教程</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<!--生产环境建议用压缩版本,非压缩版本建议学习使用 -->
<style>
* {
outline: 0px;
border: 0px;
margin: 0px;
padding: 0px;
}
div {
border: 2px solid #882BEF;
margin: 30px;
width: 500px;
height: auto;
}
ul {
list-style: none;
}
div {
border: 2px solid #882BEF;
margin: 30px;
width: 500px;
height: auto;
}
.extraHeight {
height: 400px;
}
.extraHeight ul li {
margin: 10px auto;
}
<!--啊咧,这上面所有样式只是让效果显示排版一下而增加的-->
</style>
</head>
<body>
<div class="icon-test-list">
<h1>图标基础样式</h1>
<ul>
<li><i class="fa fa-weixin"></i>微信</li>
<li><i class="fa fa-whatsapp"></i>whatsapp</li>
<li><i class="fa fa-youtube"></i>youtube</li>
<li><i class="fa fa-weibo"></i>新浪微博</li>
</ul>
</div>
<div class="icon-test-list">
<h1>图标规格样式</h1>
<span></span>
<ul>
<li><i class="fa fa-weixin "></i>微信</li>
<li><i class="fa fa-weixin fa-lg"></i>微信lg</li>
<li><i class="fa fa-weixin fa-2x"></i>微信</li>
<li><i class="fa fa-weixin fa-3x"></i>微信3x</li>
<li><i class="fa fa-weixin fa-4x"></i>信4x</li>
<li><i class="fa fa-weixin fa-5x"></i>微信5x</li>
</ul>
</div>
<!--
fa-lg比常规图标大33%,而2X~5x都是常规图标大小的倍数,具体可以用F12调试查看计算
也可以去查看less的规则
-->
<div class="icon-test-list">
<h1>图标固定大小</h1>
<ul>
<li><i class="fa fa-fw fa-weixin"></i>微信</li>
<li><i class="fa fa-fw fa-whatsapp"></i>whatsapp</li>
<li><i class="fa fa-fw fa-youtube"></i>youtube</li>
<li><i class="fa fa-fw fa-weibo"></i>新浪微博</li>
</ul>
</div>
<!--
fa-fw是用来固定大小的
-->
<div class="icon-test-list extraHeight">
<h1>图标边框及图标移动</h1>
<ul>
<li><i class="fa fa-tag pull-right"></i>这是一句测试的文字,图标定位在右边</li>
<li><i class="fa fa-tag fa-2x pull-left "></i>
<p>图标没有边框,图标在左边,图标2x[这是填充文字这是填充文字这是填充文字这是填充文字]</p>
</li>
<li><i class="fa fa-search fa-3x pull-right fa-border"></i>
<p>我的图标三倍大小,内容在右边,且图标有边框[这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字][这是填充文字这是填充文字这是填充文字这是填充文字]</p>
</li>
</ul>
</div>
<!--
fa-border 可以给图标加一个边框
pull-right和pull-left可以控制图标位置,是文字环绕
-->
<div class="icon-test-list">
<h1>图标动画</h1>
<ul>
<li><i class="fa fa-spin fa-2x fa-arrow-right"></i> fa-arrow-right-匀速旋转,2s一圈</li>
<li><i class="fa fa-spin fa-2x fa-spinner fa-pulse"></i>fa-spinner--一圈分为八次转完,时间1S</li>
</ul>
</div>
<!--
在less里面定义
spin的速度是linear(匀速),一圈2s
pulse分为八步,一圈时间1S
-->
<div class="icon-test-list">
<h1>图标旋转</h1>
<ul>
<li><i class="fa fa-hand-o-up "></i>手:默认状况</li>
<li><i class="fa fa-hand-o-up fa-rotate-90 "></i>手:旋转90度</li>
<li><i class="fa fa-hand-o-up fa-rotate-180 "></i>手:旋转180度</li>
<li><i class="fa fa-hand-o-up fa-rotate-270"></i>手:旋转270度</li>
<li><i class="fa fa-hand-o-up fa-flip-horizontal "></i>手:水平(90%)</li>
<li><i class="fa fa-hand-o-up fa-flip-vertical "></i>手:垂直(180%)</li>
</ul>
</div>
<!--
fa-rotate-*:来控制旋转的度数
fa-flip-*:两个参数来控制水平和垂直
-->
<div class="icon-test-lise">
<h1>堆叠图标:合并图形</h1>
<ul>
<li>
<span class="fa-stack">
<i class="fa fa-stack-2x fa-bookmark-o"></i>
<i class="fa fa-stack-1x fa-child"></i>
</span>随便找的两个图标合成
</li>
<li>
<span class="fa-stack">
<i class="fa fa-stack-2x fa-lemon-o"></i>
<i class="fa fa-stack-1x fa-chain "></i>
</span>随便找的两个图标合成
</li>
<li>
<span class="fa-stack">
<i class="fa fa-stack-2x fa-wheelchair"></i>
<i class="fa fa-stack-1x fa-transgender-alt"></i>
</span>随便找的两个图标合成
</li>
<li>
<span class="fa-stack fa-2x">
<i class="fa fa-stack-1x fa-comment"></i>
<i class="fa fa-stack-2x fa-linux"></i>
</span>随便找的两个图标合成
</li>
<li>
<span class="fa-stack fa-3x">
<i class="fa fa-stack-1x fa-chain"></i>
<i class="fa fa-stack-2x fa-circle-o "></i>
</span>随便找的两个图标合成
</li>
<li>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>随便找的两个图标合成
</li>
</ul>
</div>
<!--
fa-stack作为父,组合子元素生成的对象;可以使用规格参数
fa-stack-2x 作为背景的栈,要大于显示图形的栈
fa-stack-1x 作为背景栈内部的内容,所以要小于背景栈
fa-inverse 用来反转图标颜色,生成可见图标组
-->
</body>
</html>
CND引用AweSome(推荐)
只要把head内引用本地awesome的位置改下即可
<link href="http://cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">图标大全
- Font Awesome — 图标有分类,带搜索功能
- Font Awesome Cheatsheet — 图标汇总表
Font-Awesome最新版完整使用教程的更多相关文章
- sublime3+quick3.5 完整使用教程
sublime3+quick3.5 完整使用教程 Administrator 2015-07-15 14:43:08 1. 安装Sublime3 2. 注册Sublime3 Help- ...
- BI之SSAS完整实战教程7 -- 设计维度、细化维度中 ：浏览维度，细化维度
上篇文章我们已经将Dim Geography维度设计好. 若要查看维度的成员, AS需要接收该维度的详细信息(包括已创建的特性.成员属性以及多级层次结构), 通过XMLA与AS的实例进行通信. 今天我 ...
- BI之SSAS完整实战教程6 -- 设计维度、细化维度上：创建维度定义特性关系
前面我们使用过数据源向导.数据源视图向导.Cube向导来创建相应的对象. 本篇我们将学习使用维度向导来创建维度. 通过前面几个向导的学习,我们归纳一下共同点,主要分成两步 1. 使用某种对象类型的向导 ...
- BI之SSAS完整实战教程5 -- 详解多维数据集结构
之前简单介绍过多维数据集(Cube)的结构. 原来计划将Cube结构这部分内容打散,在实验中穿插讲解, 考虑到结构之间不同的部分都有联系,如果打散了将反而不好理解,还是直接一次性全部讲完. 本篇我们将 ...
- BI之SSAS完整实战教程4 -- 部署至SSAS进行简单分析
上一篇已经创建了多维数据集的结构. 接下来我们将多维数据集的架构定义发送到Analysis Services实例,部署到AS上去. 文章提纲 部署和浏览多维数据集 SSMS使用简介 总结 一.部署和浏 ...
- BI之SSAS完整实战教程2 -- 开发环境介绍及多维数据集数据源准备
上一篇我们已经完成所有的准备工作,现在我们就开始动手,通过接下来的三篇文章创建第一个多维数据集. 传统的维度和多维数据集设计方法主要是基于现有的单源数据集. 在现实世界中,当开发商业智能应用程序时,很 ...
- BI之SSAS完整实战教程1 -- 开篇， BI简介 & SSAS简介
文章提纲 商业智能(BI, Business Intelligence)基本概念 SSAS(SQL Server Analysis Services)相关工具(开发.管理和客户端) 总结 一.商业智能 ...
- 新版TeamTalk部署教程
新版TeamTalk部署教程 新版TeamTalk已经在2015年03月28日发布了,目前版本定为1.0.0版本,后续版本号会按照如下规则进行:1.版本规则按照x.y.z的形式进行.2.各端小bug修 ...
- ubuntu下安装和配置最新版JDK8傻瓜教程
ubuntu下安装和配置最新版JDK8傻瓜教程 听语音 | 浏览:18940 | 更新:2014-07-14 22:13 | 标签:ubuntu 1 2 3 4 5 6 分步阅读 ubuntu系统通常 ...
随机推荐
- appium使用教程(一 环境搭建)-------------2.安装部署
1) 安装appium 2) SDK(不建议使用模拟器,占用内存很大,会造成机器卡顿.另外模拟器还存在兼容性问题:pc为x86架构,绝大多数的手机都是ARM架构,app的兼 ...
- flex属性的取值
首先明确一点是, flex 是 flex-grow.flex-shrink.flex-basis的缩写.故其取值可以考虑以下情况:flex 的默认值是以上三个属性值的组合.假设以上三个属性同样取默认值 ...
- Linux 中常用的基础命令一
1.目录相关命令的使用 pwd(printing working directory) 显示当前工作目录 pwd命令相关的环境变量: PWD 保存了当前工作目录路径 OLDP ...
- SPOJ 694 Distinct Substrings
Distinct Substrings Time Limit: 1000ms Memory Limit: 262144KB This problem will be judged on SPOJ. O ...
- 【转】 Java 进行 RSA 加解密时不得不考虑到的那些事儿
[转] Java 进行 RSA 加解密时不得不考虑到的那些事儿 1. 加密的系统不要具备解密的功能,否则 RSA 可能不太合适 公钥加密,私钥解密.加密的系统和解密的系统分开部署,加密的系统不应该同时 ...
- C# 从需要登录的网站上抓取数据
[转] C# 从需要登录的网站上抓取数据 背景:昨天一个学金融的同学让我帮她从一个网站上抓取数据,然后导出到excel,粗略看了下有1000+条记录,人工统计的话确实不可能.虽说不会,但作为一个学计算 ...
- python main函数
关于Python的主(main)函数问题 2007-07-23 19:14 初次接触Python的人会很不习惯Python没有main主函数.这里简单的介绍一下,在Python中使用main函数的方法 ...
- COGS——T 8. 备用交换机
http://www.cogs.pro/cogs/problem/problem.php?pid=8 ★★ 输入文件:gd.in 输出文件:gd.out 简单对比时间限制:1 s 内存 ...
- hdu 1695 GCD （欧拉函数、容斥原理）
GCD Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submis ...
- 动态网页爬取样例（WebCollector+selenium+phantomjs）
目标:动态网页爬取 说明:这里的动态网页指几种可能:1)须要用户交互,如常见的登录操作:2)网页通过JS / AJAX动态生成.如一个html里有<div id="test" ...