Font Awesome矢量图标框架

一、font awesome简介

  1. 目前图标总数共有519个;
  2. 不依赖Javascript
  3. 矢量图形,无限缩放
  4. 免费,可用于商业
  5. CSS控制样式,自定义图标颜色,大小,阴影,一切可能实现的效果
  6. 支持retina显示(苹果retina 屏幕)
  7. 源于BS框架(最初的目标设计使用方向),现在基本支持主流的框架
  8. 兼容屏幕阅读器
  9. 图标用到的animation适用于IE8~9

二、font awesome下载及引入方法

  • 官网 — 点击Download即可下载最新版本
  • Github — Font-Awesome仓库 <link rel="stylesheet" type="text/css" href="./static/awesome/css/font-awesome.min.css">

三、font awesome使用方法

  • 基本语法 <i class="fa fa-camera-retro"></i>
  • 按钮中嵌套 <button> <i class="fa fa-trash-o fa-lg"></i> 删除 </button>
  • 与bootstrap一起使用 <a class="btn btn-danger" href="#"> <i class="fa fa-trash-o fa-lg"></i> Delete </a>
  • 配合列表一起使用 <ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>List icons</li> <li><i class="fa-li fa fa-check-square"></i>can be used</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li> <li><i class="fa-li fa fa-square"></i>in lists</li> </ul>
  • 动态图标 <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i> <span class="sr-only">Loading...</span> <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i> <span class="sr-only">Loading...</span> <i class="fa fa-refresh fa-spin fa-3x fa-fw"></i> <span class="sr-only">Loading...</span> <i class="fa fa-cog fa-spin fa-3x fa-fw"></i> <span class="sr-only">Loading...</span>
  • 翻转图标 <i class="fa fa-shield"></i> normal<br> <i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br> <i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br> <i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br> <i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br> <i class="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical
  • 层叠图标 <span class="fa-stack fa-lg"> <i class="fa fa-camera fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x text-danger"></i> </span>
  • 与输入框一起使用 <div class="input-group margin-bottom-sm"> <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span> <input class="form-control" type="text" placeholder="Email address"> </div> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span> <input class="form-control" type="password" placeholder="Password"> </div>
  • 与下拉列表一起 <div class="btn-group open"> <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a> <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"> <span class="fa fa-caret-down" title="Toggle dropdown menu"></span> </a> <ul class="dropdown-menu"> <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li> <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li> <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li> <li class="divider"></li> <li><a href="#"><i class="fa fa-unlock"></i> Make admin</a></li> </ul> </div>
  • 竖排排列 <div class="list-group"> <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>  Home</a> <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>  Library</a> <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>  Applications</a> <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>  Settings</a> </div>
  • 修改图标的大小 <i class="fa fa-camera-retro fa-lg"></i> fa-lg <i class="fa fa-camera-retro fa-2x"></i> fa-2x <i class="fa fa-camera-retro fa-3x"></i> fa-3x <i class="fa fa-camera-retro fa-4x"></i> fa-4x <i class="fa fa-camera-retro fa-5x"></i> fa-5x
  •  修改图标的颜色 <i class="fa fa-camera-retro" style="color: #0d71bb"></i>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小程序之家

如何在小程序中实现音频播放

在如何使用小程序媒体组件这篇文章中,我们介绍了小程序媒体组件的使用,但是对音频组件部分讲的不够详细,本文将对音频部分做些补充。

4.1K10
来自专栏Material Design组件

Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

25840
来自专栏DeveWork

Google官方网页载入速度检测工具PageSpeed Insights 使用教程

相信有接触前端开发的大神们都听说过Google官方的PageSpeed Tools,这个网页载入速度检测工具有在线版本也有一个 Chrome 扩展,叫PageS...

70580
来自专栏挖坑填坑

Asp.net+Vue2构建简单记账WebApp之一(设计)

作为一个asp.net 程序员,当发现Vue.js的存在时就爱上它,但是在asp.net应用中使用Vue一时让我无从上手。直到最近有了点心得。就计划把之前做的一...

21140
来自专栏娱乐心理测试

移动端图标生成工具

16300
来自专栏安富莱嵌入式技术分享

emWin洗衣机简易操作界面,含uCOS-III和FreeRTOS两个版本

配套例子: V6-904_STemWin提高篇实验_洗衣机简易操作界面(uCOS-III) V6-905_STemWin提高篇实验_洗衣机简易操作界面(Fre...

24750
来自专栏腾讯社交用户体验设计

移动H5前端性能优化指南 - 腾讯ISUX

54010
来自专栏九彩拼盘的叨叨叨

减少浏览器兼容性问题

做为一个前端工程师,不少时间都在处理浏览器兼容性问题。本文对如何减少浏览器兼容性问题的方法做了些总结。

12920
来自专栏落影的专栏

如何快速定位、分析、解决非Crash的BUG(iOS 11篇)

前言 众所周知,Bug是线上应用极力规避但又无法避免的。对于致命的Bug,我们可以通过Crash日志进行分析;对于无法复现的Bug、特定操作步骤引起的Bug、某...

44150
来自专栏吴裕超

点击穿透原理及解决

一、事件触发顺序 PC网页上的大部分操作都是用鼠标的,即响应的是鼠标事件,包括mousedown、mouseup、mousemove和click事件。一次点击行...

76460

扫码关注云+社区

领取腾讯云代金券