Font Awesome文字图标的使用
文章目录
- Font Awesome图标
- 加载方式
- 最简单的方式：BootstrapCDN
- 使用方式
- 基本图标
- 大图标
- 图标固定宽度
- 用于列表
- 边框与对齐
- 动画效果
- 旋转与翻转
- 组合使用
Font Awesome图标
Font Awesome提供矢量文字图标，并支持更改大小，颜色，阴影和其他支持的效果，并开源免费，几乎包含网页所需所有文字图标(675个)
加载方式
最简单的方式：BootstrapCDN
将Font Awesome直接通过link标签加入到head中即可使用，复制以下代码即可使用
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
使用方式
将链接加载到head中后，即可使用
在添加图标时，可以使用span标签也可以使用i标签，在class中先添加前缀fa，然后再添加对应fa-图标名称
基本图标
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Font Awesome</title><link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><style>/*对样式颜色进行修改*/.fa-windows{color: red;}</style>
</head>
<body>
<i class="fa fa-camera-retro"></i>
<i class="fa fa-windows"></i>
</body>
</html>
大图标
使用
fa-lg(33%递增)、fa-2x、fa-3x、fa-4x，或者fa-5x类 来放大图标。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Font Awesome</title><link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<i class="fa fa-camera-retro fa-lg"></i>
<i class="fa fa-camera-retro fa-2x"></i>
<i class="fa fa-camera-retro fa-3x"></i>
<i class="fa fa-camera-retro fa-4x"></i>
<i class="fa fa-camera-retro fa-5x"></i>
</body>
</html>
图标固定宽度
使用
fa-fw可以将图标设置为一个固定宽度。主要用于不同宽度图标无法对齐的情况。 尤其在列表或导航时起到重要作用。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Font Awesome</title><link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><style>a {text-decoration: none;}</style>
</head>
<body>
<div class="list-group"><a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i> Home</a><a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i> Library</a><a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a><a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i> Settings</a>
</div>
</body>
</html>
用于列表
使用
fa-ul和fa-li便可以简单的将无序列表的默认符号替换掉
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Font Awesome</title><link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<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"></i>as bullets</li><li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>
</body>
</html>
边框与对齐
使用
fa-border以及pull-right或pull-left可以轻易构造出引用的特殊效果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Font Awesome</title><link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<i class="fa fa-quote-left pull-left fa-border"></i>
...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning— So we beat on, boats against the
current, borne back ceaselessly into the past.
<i class="fa fa-quote-left pull-right fa-border fa-flip-horizontal"></i>
</body>
</html>
动画效果
使用 fa-spin 类来使任意图标旋转，现在您还可以使用 fa-pulse来使其进行8方位旋转。尤其适合
fa-spinner、fa-refresh和fa-cog
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Font Awesome</title><link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>
</body>
</html>
旋转与翻转
- normal 是正常效果
- fa-rotate-90 旋转90°
- fa-rotate-180 旋转180°
- fa-rotate-270 旋转270°
- fa-flip-horizontal 水平翻转
- fa-flip-vertical 垂直翻转
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Font Awesome</title><link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<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> icon-flip-vertical
</body>
</html>
组合使用
如果想要将多个图标组合起来，使用
fa-stack类作为父容器，fa-stack-1x作为正常比例的图标，fa-stack-2x作为大一些的图标。还可以使用fa-inverse类来切换图标颜色。您可以在父容器中 通过添加 大图标 类来控制整体大小
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Font Awesome</title><link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<span class="fa-stack fa-lg"><i class="fa fa-square-o fa-stack-2x"></i><i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o<br>
<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>
fa-flag on fa-circle<br>
<span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<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"></i>
</span>
fa-ban on fa-camera
</body>
</html>
Font Awesome文字图标的使用相关推荐
- Vue.js - Font Awesome字体图标的使用详解（vue-fontawesome库）
Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库) Font Awesome 是一个十分优秀的第三方图标库,我之前也写过文章介绍如何在 html 页面中使 ...
- 一个简单demo通过em实现‘响应式设计、em、文字图标svg’
大多数网站所谓的响应式设计,只是在不同大小屏幕上能正常显示罢了,在大屏幕上显示全部页面,在小屏幕上隐藏一部分不重要的页面,这样的响应式设计 只是为了兼容pc和移动,但在移动上的效果却是很不理想的,隐藏 ...
- 在线文字图标logo文章封面图生成工具
在线文字图标logo文章封面图生成工具 在线文字图标logo文章封面图生成工具 在线文字图标logo文章封面图生成工具. 微信公众号文章封面图在线生成. https://tooltt.com/font ...
- html前端小知识：制作简单的纯文字图标按钮
今天分享下"html前端小知识:制作简单的纯文字图标按钮"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark ...
- bootstrap 文字图标 glyphicon class 不显示
关于bootstrap 文字图标 不显示问题 @font-face的使用 需要的文件(就是第二个 fonts) @font-face的使用 自己下载的bootstrap使用Notepad++打开发现没 ...
- winform设置Sunny 主题按钮等控件文字图标
winform设置Sunny 主题按钮等控件文字图标 设置Symbol 属性 如果不显示字体图标就设置为0
- 修改4.1-5.0 5.0-6.0 6.0及以上状态栏文字图标的颜色设置（不包括小米，魅族，oppo，后续会更新）
在项目开发中,有的地方需要沉浸式的状态栏,而且会遇到底部TAB切换时,不同fragment中顶部状态栏颜色不一致的需求,这样一来,假设我们设置Afragment状态栏为白色,那么其中的文字图标将会看不 ...
- Font Awesome字体图标库
Font Awesome字体图标是一款开源的字体图标库,可兼容BootStramp,官网:https://fontawesome.dashgame.com/ 安装方法简单,将压缩包中的fonts与Cs ...
- Unity_UIWidgets - 文字图标Icon
Unity_UIWidgets - 文字图标Icon 文字图标Icon 开篇 不吐不快的废话 正题 主题Icon 获取Icon 第一步 第二步 第三步 使用Icon 1.导入至Resources文件夹 ...
最新文章
- javascript的词法作用域
- 报复性降薪潮来袭，怎么应对？
- 状态压缩 HDU 1565
- django中csrftoken跨站请求伪造的几种方式
- React Native的安装和初始化(android /ios)
- [PAT乙级]1017 A除以B
- spring学习（29）:xml配置规范
- JDK11+Tomcat10 下载安装+环境配置
- 初次使用Atlas JavaScript (Part 3 - 实现自己的应用)
- abort()和exit()的区别
- 数据结构考研:线性表,顺序表,有序表,链表,数组的概念的区别与联系(软件工程/计算机/王道论坛)
- MySQL数据库笔记6——约束Constraint
- 【iOS沉思录】：iOS多媒体音频(下)-录音及其播放
- 光纤交换机 序列号_FAQ-如何查询设备的SN号
- 美食app的UI设计
- linux 串口操作
- FME的ESRI Geodatabase (MDB)格式介绍（一）
- STC89C51——定时器/计数器介绍及程序配置
- 【剑桥摄影协会】清晰度（Sharpness）
- 继绿联、洛克之后，紫米也被举报涉嫌虚假宣传