FontAwesome 字体图标库 使用
Intro
Font Awesome(以下简称fa)是一套绝佳的图标字体库和CSS框架。
fa被设计为与内联元素一起使用。
<i>和<span>标签被广泛应用于图标。(推荐使用<i>，标签更简短，且语义更精确)
当使用fa的图标重叠时候，在<span>标签中嵌套两个<i>标签。
依赖
两种方法，直接引入CDN或引入本地依赖(略)。
CDN: <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
使用
简单使用
<i class="fa fa-search">搜索</i>设置style属性(color, font-size等) 灵活
<i class="fa fa-search" style="font-size:60px;color:red;"></i>图标大小类
<i class="fa fa-search">fa</i>
<i class="fa fa-search fa-lg">fa fa-lg</i>
<i class="fa fa-search fa-2x">fa fa-2x</i>
<i class="fa fa-search fa-3x">fa fa-3x</i>
<i class="fa fa-search fa-4x">fa fa-4x</i>
<i class="fa fa-search fa-5x">fa fa-5x</i>
- 动态图标
<code>fa-spin</code>类可以让图标旋转。<i class="fa fa-search fa-spin">fa-spin</i> <br>
<code>fa-pulse</code>类可以让图标以8步为脉冲周期进行旋转。<i class="fa fa-search fa-pulse">fa-pulse</i>
- 图标旋转(顺时针旋转)
fa fa-* fa-rotate-90|180|270
<i class="fa fa-search">搜索</i>
<i class="fa fa-search fa-rotate-90">搜索</i>
<i class="fa fa-search fa-rotate-180">搜索</i>
<i class="fa fa-search fa-rotate-270">搜索</i>
- 图标翻转
fa fa-flip-horizontal|vertical
<i class="fa fa-search">搜索</i>
<i class="fa fa-search fa-flip-horizontal">搜索</i>
<i class="fa fa-search fa-flip-vertical">搜索</i>
- 两个图标堆叠
<p>用<code><span></code>中嵌套两个<code><i></code>标签。且<code><span class="fa-stack"></code> <br>两个子标签 <code><i></code>中，大图标(class=<code>fa-stack-2x</code>)中间嵌套着小图标(class=<code>fa-stack-1x</code>) <br><code>fa-inverse</code>类用于其中的一个<code><i></code>，用于反转图标颜色。<br><span class="fa-stack fa-lg"><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-twitter fa-stack-1x"></i></span>fa-twitter on fa-circle-thin<br><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-twitter fa-stack-1x fa-inverse"></i></span>fa-twitter (inverse) on fa-circle<br><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" style="color:red;"></i></span>fa-ban on fa-camera<br>
</p>
- 图标固定宽度(fix width)
fa fa-fw
<p>当不同的图标宽度偏离对齐时，用fa-fw类设置固定宽度的图标。适用于导航列表和列表组。</p>
页面如下：
Link
- Every Font Awesome 4.7.0 Icon, CSS Class, & Unicode，这里有所有的fa图标类。
- Bootstrap 字体图标 Glyphicons 使用
Code
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"><title>FontAwesome</title><style>h3 {display: inline;}code {font-family: Menlo, Monaco, Consolas, "Courier New", monospace;padding: 2px 4px;font-size: 90%;color: #c7254e;background-color: #f9f2f4;border-radius: 4px;}</style>
</head>
<body><h3>简单使用</h3><i class="fa fa-search">搜索</i> <br><h3>设置style属性(color, font-size等)</h3><i class="fa fa-search" style="font-size:60px;color:red;"></i> <br><h3>图标大小类</h3><i class="fa fa-search">fa</i><i class="fa fa-search fa-lg">fa fa-lg</i><i class="fa fa-search fa-2x">fa fa-2x</i><i class="fa fa-search fa-3x">fa fa-3x</i><i class="fa fa-search fa-4x">fa fa-4x</i><i class="fa fa-search fa-5x">fa fa-5x</i> <br><h3>动态图标</h3><code>fa-spin</code>类可以让图标旋转。<i class="fa fa-search fa-spin">fa-spin</i> <br><code>fa-pulse</code>类可以让图标以8步为脉冲周期进行旋转。<i class="fa fa-search fa-pulse">fa-pulse</i> <br><h3>图标旋转(顺时针旋转) <code>fa fa-* fa-rotate-90|180|270</code></h3><i class="fa fa-search">搜索</i><i class="fa fa-search fa-rotate-90">搜索</i><i class="fa fa-search fa-rotate-180">搜索</i><i class="fa fa-search fa-rotate-270">搜索</i> <br><h3>图标翻转 <code>fa fa-flip-horizontal|vertical</code></h3><i class="fa fa-search">搜索</i><i class="fa fa-search fa-flip-horizontal">搜索</i><i class="fa fa-search fa-flip-vertical">搜索</i> <br><h3>两个图标堆叠</h3><p>用<code><span></code>中嵌套两个<code><i></code>标签。且<code><span class="fa-stack"></code> <br>两个子标签 <code><i></code>中，大图标(class=<code>fa-stack-2x</code>)中间嵌套着小图标(class=<code>fa-stack-1x</code>) <br><code>fa-inverse</code>类用于其中的一个<code><i></code>，用于反转图标颜色。<br><span class="fa-stack fa-lg"><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-twitter fa-stack-1x"></i></span>fa-twitter on fa-circle-thin<br><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-twitter fa-stack-1x fa-inverse"></i></span>fa-twitter (inverse) on fa-circle<br><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" style="color:red;"></i></span>fa-ban on fa-camera<br></p><h3>图标固定宽度(fix width) <code>fa fa-fw</code></h3><p>当不同的图标宽度偏离对齐时，用fa-fw类设置固定宽度的图标。适用于导航列表和列表组。</p></body>
</html>
FontAwesome 字体图标库 使用相关推荐
- 使用font-awesome字体图标库，让你的网站好看10倍
前言 在网站开发中,往往需要加上一些图标的点缀来使页面显得更加美观和友好.但是对于一些缺乏设计能力的人员(比如本人),想自己制作一套好看的图标比较麻烦.font-awesome可以帮助我们解决这个问题 ...
- CSS Font-awesome字体图标库文件
当出现需要引用的图标,需要link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.m ...
- vue使用最新版font-awesome字体图标库（内附花式玩法）
安装 安装基础依赖: 进入 Vue 项目文件夹,执行如下命令安装基础依赖库. npm i --save @fortawesome/fontawesome-svg-core npm i --save @ ...
- font-awesome字体图标库在微信小程序中的使用
1.下载font-awesome 官网地址:https://fontawesome.dashgame.com 下载解压后得到文件如下: 2.利用tansfonter CSS @ font-face生成 ...
- vue项目安装/使用font-awesome字体图标库
1.npm安装font-awesome npm install font-awesome --save 安装成功后,在node_modules文件夹新增font-awesome文件夹 2.在main. ...
- 制作自己的字体图标库
你可能使用过或听说过各种字体图标库,比如fontawesome, glyphicon等,想过制作一个属于自己的字体图标库吗?今天就试着做一个. 参考:https://justforuse.github ...
- Android肝帝战纪之字体图标库(iconify)的简单使用
字体图标库(iconify)的简单使用 本文介绍字体图标库简单的封装和使用(以集成Fontawesome为例): Iconify的GIithub链接 点此链接到Github 导入依赖 //在app级别 ...
- 字体图标库（Font Awesome）的使用--绝佳的图标字体库和CSS框架
一.概述 web项目(前台/后台)开发中,很多地方需要使用图标样式(如:删除图标或短信图标,见下图),当然可以选择图片当背景或者用<img>标签,但是用图片的不灵活性也是显然易见的,如颜色 ...
- Canvas 绘制字体图标库
1.首先,你要引入一个字体图标库 – iconfont 阿里的字体图标库 将链接复制到浏览器,将获取到的css 代码复制到自己的项目 代码中 其他的不一一赘述,没有用过 iconfont 的 可以看 ...
- Font Awesome字体图标库
Font Awesome字体图标是一款开源的字体图标库,可兼容BootStramp,官网:https://fontawesome.dashgame.com/ 安装方法简单,将压缩包中的fonts与Cs ...
最新文章
- 【青少年编程】【三级】打气球游戏
- Python当前进程信息 (os包)
- 制作多域名(SAN/UCC)CSR(证书请求文件)
- sql 转html 中文乱码问题,SqlServer中文乱码问题的解决方法
- 洛谷 - P3810 【模板】三维偏序（陌上花开）(CDQ分治套树状数组)
- github可以传java吗_如何在github上传本地项目代码（新手使用）----亲测使用
- 苹果对其语音助手Siri进行显著改进：今秋将有7大新功能
- php学校成员,php访问成员变量和成员方法
- 一个奇怪的问题：tomcat 栈溢出 StackOverflowError错误
- mysql分组取每组前几条记录_[转] mysql分组取每组前几条记要(排名)
- asp.net gridview 为什么只显示一行数据_为什么中位数（大多数时候)比平均值好
- HEVC(H265)播放器
- 调研AutoGluon数据处理与Tabular-NN
- matepad和鸿蒙,华为MatePadPro配置速看：搭载了鸿蒙系统的它真比iPadPro强？
- sql server (sqlexpress) 服务因 3417 (0xd59) 服务性错误而停止(转自太原市李江软件开发工作室)...
- 提供淘宝进销存管理软件
- 计算机毕业设计指导 教师 评语,毕业设计指导教师评语【集锦】
- CCNA学习-路由器交换机的管理配置
- 那么一个数字字符串比如“111“，就可以转化为“AAA”、“KA”和“AK”。
- 解决linux不能上外网