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
- 官网 — 点击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(匀速),一圈2spulse分为八步,一圈时间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最新版完整使用教程相关推荐
- object detection API完整配置教程
@object detection完整配置教程 研一下学期用ubuntu16.04配置过一次tensorflow object detection 很遗憾试过很多次都失败了,不了了之,当初记得是ten ...
- 安卓模拟器Android SDK安装完整图文教程
步骤 1 2 3 4 5 6 7 8 在最新的Android 4.0.3 R2模拟器中,已经加入了GPU支持,可以支持OpenGL ES 2.0标准,让开发者可以借助模拟器来测试自己的OpenGL游戏 ...
- 阿里云服务器安装宝塔面板完整图文教程
下面稍微介绍一下如何使用阿里云服务器安装宝塔面板. 概述 如果还有不了解宝塔面板怎么使用的小伙伴,可以看下我总结的系列教程,保证从新手变老鸟: [宝塔面板精选教程汇总] 宝塔面板教程(1)基于云服务器 ...
- oracle oats 安装,Mentor完整培训教程.pdf
Mentor完整培训教程 MENTOR基本培训教程 电路设计人员电路设计人员 MENTORMENTOR培训教程培训教程 讲述人讲述人:: 叉叉刀片叉叉刀片 叉叉刀片 设计室 MENTOR基本培训教程 ...
- 最新版OpenWrt编译教程,解决依赖问题
最新版OpenWrt编译教程,解决依赖问题 参考文章: (1)最新版OpenWrt编译教程,解决依赖问题 (2)https://www.cnblogs.com/jzssuanfa/p/7400840. ...
- GPT转MBR怎么转?GPT转MBR完整图文教程
GPT转MBR分区怎么转?现在很多笔记本的硬盘分区都是GPT模式,如果想装XP的话,那只能将GPT磁盘转换成MBR磁盘分区才行.接下来,简单说说如何将GPT分区转成MBR分区! 如果本身电脑有两个硬盘 ...
- 万能Ghost全攻略(最详细完整的教程)
万能Ghost全攻略(最详细完整的教程) 一.运行 Sysprep 工具的要求 要使用 Sysprep 工具,计算机的硬件和相关设备必须满足下列要求: 1. 参考计算机和目标计算机必须具有兼 ...
- Pycharm完整中文教程及安装配置
Pycharm完整中文教程 https://www.pycharm.net.cn/ https://blog.csdn.net/weixin_36411839/article/details/8228 ...
- 金泰克/tigo S300 240G SM225K H27QFG8PEM5R 完整开盘教程
金泰克/tigo S300 240G SM225K H27QFG8PEM5R 完整开盘教程 前几天电脑运行中黑屏了,重启发现固态坏了,系统在主板的M2固态盘上,使用没影响.于是把马上三年质保的东芝盘反 ...
最新文章
- CSS.text不被选中
- Win7 64位的SSDTHOOK(2)---64位SSDT hook的实现
- C#调用dll提示试图加载格式不正确的程序解决方法
- 71 说出常用的类、包、接口各5个
- python降级pip_1.2 pip降级selenium3.0
- CCNA--增强型内部网关路由选择协议(EIGRP)
- C语言学习笔记---指针
- 国产数据库产业百花齐放 “1+4+4+N”格局形成
- 缺少ntstrsafe.lib kndis5mp.lib解决办法
- redis教程(七)之redis List
- android ui 开发界面量具 尺子,android尺子的自定义view——RulerView详解
- wincc报表日报表实例_wincc报表例程
- iOS iPhone各机型尺寸及导航栏高度
- 迅雷9解决php文件,迅雷9的这些优化 你必须要知道
- 开发人员的不断流动、让我们更加坚定信念,一定要控制好整个系统的底层架构、核心设计、日常质量检查工作
- TeamViewer一直显示“未就绪”什么原因?
- Ink脚本语言学习笔记(小结)
- 少儿机器人教育在国内的情况
- 用R来求解一元二次方程
- Linux学习之定时任务调度
热门文章
- Swoole实现h5版聊天室笔记
- 如何计算2的10次方
- 亚马逊、速卖通、东南亚等跨境电商平台2022年最新测评自养号系统
- matlab画动物轮廓图,MATLAB一维插值的应用实例—画左右手的轮廓图
- communicate(communicate with sb等于)
- 快来看,你的盒子也能用OpenCV NPU后端啦
- Linux下JIRA版本5.0.1的安装.破解.汉化
- 常见的服务器操作系统和工作站操作系统
- (转)[IOS]正在通过app store进行鉴定解决方案
- 我真的不懂路由器和交换机的区别