Fontawesome字体使用说明及其常用效果语法
2017-07-10 18:38
543 查看
本文主要介绍如何在我们的站点里引入Footawesome字体,并且介绍一些Fontawesome字体常用的一些使用方法。
下面是整理的一下使用心得。
解压源文件,源文件如下图。将CSS(样式文件),fonts(字体)将两个文件夹拷贝到站点中。
在HMTL文件中,引入CSS(发布使用min(压缩版本),调试可以使用未压缩的) ,如:
这样我们便可以在UI中,使用Foot-awesome图标了。
fa-lg比常规图标大33%,而2x~5x都是常规图标大小的倍数(
pull-right : 控制图标占据右侧
fa-border : 图标边框
下面介绍两个css类:
fa-spin :
spin的速度是linear(匀速),一圈2s
fa-fa-pulse :
pulse分为八步(图标分8次转完一圈),一圈时间1S
图标动画实例:
fa-rotate-*:来控制旋转的度数
fa-flip-*: 两个参数来控制水平和垂直
例如:
使用语法:
要多添加一个 fa-stack类,而后以此加上要堆叠的图标
fa-stack作为父,组合子元素生成的对象;可以使用规格参数
fa-stack-2x 作为背景的栈,要大于显示图形的栈
fa-stack-1x 作为背景栈内部的内容,所以要小于背景栈
fa-inverse 用来反转图标颜色,生成可见图标组
使用实例
以上实例代码,引用网上博文,详情见: 引用参考
下面是整理的一下使用心得。
如何在站点中引入Fontawesome字体
Footawesome官网,点击DownLoad下载 资源文件。解压源文件,源文件如下图。将CSS(样式文件),fonts(字体)将两个文件夹拷贝到站点中。
在HMTL文件中,引入CSS(发布使用min(压缩版本),调试可以使用未压缩的) ,如:
<!-- font-awesome的相对路径 --> <link rel="stylesheet" href="css/font-awesome.min.css">
这样我们便可以在UI中,使用Foot-awesome图标了。
footawesome使用实例
下面的实例是引用 crper大神写的demo,在这儿借用此实例做一个常用用法的介绍。基础用法
在标签中,使用 css类fa fa-[icon],此处icon 代表了相应的图标类,如:
icon-wixin //微信图标
图标的规格
icon图标的大小是 由字体大小决定的,也就说我们通过font-size来控制icon图标的大小,font-awesome也提供了对应的规格类大小,更适用。fa-lg比常规图标大33%,而2x~5x都是常规图标大小的倍数(
fa-2x,fa-3x)
图标固定大小
使用fa-fw类
图标边框及图标移动
pull-left : 控制图标在占据左侧pull-right : 控制图标占据右侧
fa-border : 图标边框
图标动画
下面的知识点厉害了,想不想不通过JS,就让图标动起来? font-awesome就可以实现,仅仅一个css类,就可以让我们的图标动起来。下面介绍两个css类:
fa-spin :
spin的速度是linear(匀速),一圈2s
fa-fa-pulse :
pulse分为八步(图标分8次转完一圈),一圈时间1S
图标动画实例:
<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 -->
图标旋转
fa-rotate-*:来控制旋转的度数
fa-flip-*: 两个参数来控制水平和垂直
例如:
<!--偏移角度只能是90°的倍数--> fa-rotate-90 fa-rotate-180 fa-rotate-360 <!--垂直与水平--> fa-flip-horizontal fa-flip-vertical
图标堆叠 ,图标合并
最让人吃惊的是这一个了,图标竟然还能凑在一起,如下图:都是拼接起来的,突然就想起小时候玩过的那些“七巧板”,“魔尺”之类的玩具。使用语法:
要多添加一个 fa-stack类,而后以此加上要堆叠的图标
fa-stack作为父,组合子元素生成的对象;可以使用规格参数
fa-stack-2x 作为背景的栈,要大于显示图形的栈
fa-stack-1x 作为背景栈内部的内容,所以要小于背景栈
fa-inverse 用来反转图标颜色,生成可见图标组
使用实例
<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>
以上实例代码,引用网上博文,详情见: 引用参考
引用参考
Font-Awesome最新版完整使用教程相关文章推荐
- Fontawesome字体使用说明及其常用效果语法
- CSS 字体(例如font-awesome),使用子域名之后不能正确显示
- 在android项目中使用FontAwesome字体
- android使用Font Awesome字体图标
- iconfont字体图标的使用方法--超简单! 我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以
- 如何在Axure中使用FontAwesome字体图标
- 【XML解析】(5)DOM4J中的XPath的使用方式及其【完整语法详细说明】
- font-awesome-animated字体的动画效果
- 在SVG中使用Bootstrap或FontAwesome图标字体
- [ExtJS5学习笔记]第五节 使用fontawesome给你的extjs5应用增加字体图标
- Axure中使用FontAwesome字体
- 学习WPF——使用Font-Awesome图标字体
- RN(react native)入坑指南-05,使用图标字体Fontawesome
- github 常用命令及其使用说明
- font-awesome的使用及其属性content
- ztree使用font-awesome字体的问题,
- 如何在photoshop等图像编辑软件中使用Font Awesome字体图标
- [ExtJS5学习笔记]第五节 使用fontawesome给你的extjs5应用增加字体图标
- wpf 使用Font-Awesome图标字体
- element-ui中使用font-awesome字体图标