Font-Awesome最新版完整使用教程
2015-05-31 22:56
399 查看
何为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
官网 — 点击Download即可下载最新版本Github — 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最新版完整使用教程
- 如何在一个网站或者一个页面规划JS
- ADO.NET学习系列(三)----做一个登录案例
- [Java5新特性]反射
- $.ajax()方法详解
- [leetcode] ZigZag Conversion
- UITouch事件处理机制
- dubbo发布web服务实例
- [Java5新特性]反射
- 一个项目紧张结束之后
- 【百度之星初赛2】连接的管道(Kruskal最小生成树)
- http、TCP/IP协议与socket之间的区别
- 增强现实第一步:如何使用相机定标结果配置OpenGL流水线
- C#登录成功提示和登录成功后进入新的窗口界面代码:
- 使用Autolayout实现UITableView的Cell动态布局和高度动态改变
- Codeforces PROB training 31.MAY
- JavaScript之this,new,delete,call,apply
- jsp web.xml文件的作用及基本配置
- 没有理由怀疑自己 从心态开始
- 【百度之星初赛2】棋盘占领(深搜|广搜)