Font Awesome文档使用手册
Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。
Font Awesome 是一套完美的图标字体库及CSS架构,主要目的是和 Bootstrap 搭配使用。
Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。
Font Awesome已经为你准备了将近500个常用icon图标（还在不断更新），能大能小，能随便修改颜色，完全开源，完全免费。
使用方法:
要使用Font Awesome图标，请在HTML页面的 部分中添加以下行：
1、国内推荐 CDN：
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
2、海外推荐 CDN
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
3、直接下载到本地
注意： 不太建议下载来安装，直接在 html 文档头部引用 CDN 文件即可。
注意： 本教程使用的是 4.7.0 版本。
您可以使用前缀 fa 和图标的名称来放置 Font Awesome 图标。
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<div>
<i class="fa fa-car" style="font-size:48px;color:red;"></i>
</div>
</body>
</html>
结果： Font Awesome 设计为与内联元素一起使用。和元素广泛用于图标。
另外注意，如果更改图标容器的字体大小或颜色，图标会更改。
大图标
fa-lg (增加33％)，fa-2x，fa-3x， fa-4x，或 fa-5x 类用于增加相对于其容器的图标大小。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<i class="fa fa-camera-retro fa-lg"></i> fa-lg <br>
<i class="fa fa-camera-retro fa-2x"></i> fa-2x <br>
<i class="fa fa-camera-retro fa-3x"></i> fa-3x <br>
<i class="fa fa-camera-retro fa-4x"></i> fa-4x <br>
<i class="fa fa-camera-retro fa-5x"></i> fa-5x <br>
</body>
</html>
Font Awesome文档使用手册的更多相关文章
- [daily][troubleshoot][archlinux][wps][font] wps文档中的图内容无法显示中文
序 用linux作为工作生产环境的几个需要解决的问题之一是:文档协作,即如何兼容Micro$oft Office格式的文档. 我一般的工作方式是:在linux下创建一个win7的虚拟机,安装常用的wi ...
- MiniGUI文档参考手册 基于v1.6.10文本
MiniGUI各种功能都分布在预先定义宏对每个文档标题.特别不方便查找,这是不利于初学者学习. 有一天,我发现doxygen,因此,使用该工具可以生成一个minigui参考文献 .基于v1.6.10文 ...
- 【G】开源的分布式部署解决方案文档 - 使用手册
G.系列导航 [G]开源的分布式部署解决方案 - 导航 已知问题 导航没有联动 因为权限只是做了基础的登录校验,考虑到后面导航要跟权限关联上暂时是写死的. 只有部分界面使用了Vue.js 因为刚开始没 ...
- 常用控件产品官方文档/手册/API列表 c#控件文档API列表 asp.net控件产品技术文档中文版
.netCHARTING报表图表控件 文档帮助手册Ab3d.PowerToys 文档帮助手册Ab3d.Reader3ds 文档帮助手册ABViewer 文档帮助手册 (工程图纸文档管理系统)Activ ...
- 资料收集：学习 Linux/*BSD/Unix 的 30 个最佳在线文档
文章转自:https://linux.cn/article-10311-1.html 手册页(man)是由系统管理员和 IT 技术开发人员写的,更多的是为了作为参考而不是教你如何使用.手册页对于已经熟 ...
- Linux内核最顶层文档
Linux 内核文档 该文件是 Linux 内核文档树中最顶层的,会随着内核一起更新:其目的是把散乱的文档集成为一个逻辑清晰的完整版,非常欢迎改善文档,如果想做出自己的贡献,加入vger.kernel ...
- Python学习文档指引
Python文档资源: 形式 角色 #注释 文件中的文档 dir函数 对象中可用属性的列表 文档字符串:__doc__ 附加在对象上的文件中的文档 PyDoc:help函数 对象的交互帮助 PyDoc ...
- PHP初中高级学习在线文档下载
收集了一些框架的学习文档与手册,视频教程,给大家带来了更多的方便,只要收藏与保存于百度云盘就好了,省去了网上到处寻找的时间!大家有需要就收藏保存起来吧! 如果不能下载请到群内获取新的下载地址 QQ群 ...
- NVelocity介绍，NVelocity中文手册文档及实例下载
NVelocity是什么velocity英音:[vi'lɔsiti]美音:[və'lɑsətɪ]近在做一个项目,客户要求有网站模板功能,能够自主编辑网站的风格,因为这个系统是为政府部门做子站系统,举个 ...
- smarty3.0中文手册文档API及使用指南
1.安装Smarty3.0一.什么是smarty?smarty是一个使用PHP写出来的模板PHP模板引擎,它提供了逻辑与外在内容的分离,简单的讲,目的就是要使用PHP程序员同美工分离,使用的程序员改变 ...
随机推荐
- Docker启动Nginx
Docker启动Nginx 搜索镜像 docker search nginx 拉取镜像 这里拉取的官方镜像 docker pull nginx 创建挂载目录 将nginx的文件都放在/opt/ngin ...
- FreeSql学习笔记——11.LinqToSql
前言 Linq的强大大家有目共睹,可以以简便的方式对数据集进行复杂操作,LinqToSql经常使用在数据库的联表.分组等查询操作中:FreeSql对LinqToSql的支持通过扩展包FreeSql ...
- 记录WPS接入AI大模型
进入官网下载海鹦OfficeAI:https://www.office-ai.cn/ 安装OfficeAI 勾选打开一个测试表格看看是否已经安装成功 打开有些人的会弹出这个提示,点击进行管理,然后点击 ...
- Flink学习（六） 常用DataStreaming API
曾经提到过,Flink 很重要的一个特点是"流批一体",然而事实上 Flink 并没有完全做到所谓的"流批一体",即编写一套代码,可以同时支持流式计算场景和批量 ...
- 2024从国庆到CSP前总结
前言 这是一篇迟来的总结,不过可能也不算太迟. 正文 截至起稿时间(2024.10.23),这个月已经讲了四次课,考了五场试.内容基本全是基于前一段时间的内容进行提升,对我而言很有帮助.我也意识到自己 ...
- Java DecimalFormat四舍五入的坑及正确用法
一.DecimalFormat四舍五入的坑 1.1 有时候我们在处理小数保留几位小数时,想到了DecimalFormat这个类的使用,百度搜一把可能用到以下方式. 1 public static vo ...
- [Qt基础内容-04] QCheckBox
QCheckBox 文章目录 QCheckBox 简介 信号 样式设计 本文主要根据QT官方帮助文档以及日常使用,简单的介绍一下QCheckBox的功能以及使用 简介 QCheckBox是一个按钮,其 ...
- MongoDB 复制集机制及原理
复制集的作用 MongoDB 复制集的主要意义在于实现服务高可用. 它的现实依赖于两个方面的功能: 数据写入时将数据迅速复制到另一个独立节点上 在接受写入的节点发生故障时自动选举出一个新的代替节点 在 ...
- 服务器Go程序意外停止自动重启
判断进程是否挂掉 ps -ef | grep ./blog |wc -l 如果输出为1,说明进程挂掉了 如果输出为2,说明进程正常运行 编辑脚本来检测和完成重启 vim restart.sh 逻辑代码 ...
- Django实战项目-学习任务系统-兑换物品管理
接着上期代码框架,开发第5个功能,兑换物品管理,再增加一个学习兑换物品表,主要用来维护兑换物品,所需积分,物品状态等信息,还有一个积分流水表,完成任务奖励积分,兑换物品消耗积分. 要想激励一个人的学习 ...