Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。

使用文档：https://fa4.uihtm.com/

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、直接下载到本地

Font Awesome下载

注意： 不太建议下载来安装，直接在 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文档使用手册的更多相关文章

  1. [daily][troubleshoot][archlinux][wps][font] wps文档中的图内容无法显示中文

    序 用linux作为工作生产环境的几个需要解决的问题之一是:文档协作,即如何兼容Micro$oft Office格式的文档. 我一般的工作方式是:在linux下创建一个win7的虚拟机,安装常用的wi ...

  2. MiniGUI文档参考手册 基于v1.6.10文本

    MiniGUI各种功能都分布在预先定义宏对每个文档标题.特别不方便查找,这是不利于初学者学习. 有一天,我发现doxygen,因此,使用该工具可以生成一个minigui参考文献 .基于v1.6.10文 ...

  3. 【G】开源的分布式部署解决方案文档 - 使用手册

    G.系列导航 [G]开源的分布式部署解决方案 - 导航 已知问题 导航没有联动 因为权限只是做了基础的登录校验,考虑到后面导航要跟权限关联上暂时是写死的. 只有部分界面使用了Vue.js 因为刚开始没 ...

  4. 常用控件产品官方文档/手册/API列表 c#控件文档API列表 asp.net控件产品技术文档中文版

    .netCHARTING报表图表控件 文档帮助手册Ab3d.PowerToys 文档帮助手册Ab3d.Reader3ds 文档帮助手册ABViewer 文档帮助手册 (工程图纸文档管理系统)Activ ...

  5. 资料收集：学习 Linux/*BSD/Unix 的 30 个最佳在线文档

    文章转自:https://linux.cn/article-10311-1.html 手册页(man)是由系统管理员和 IT 技术开发人员写的,更多的是为了作为参考而不是教你如何使用.手册页对于已经熟 ...

  6. Linux内核最顶层文档

    Linux 内核文档 该文件是 Linux 内核文档树中最顶层的,会随着内核一起更新:其目的是把散乱的文档集成为一个逻辑清晰的完整版,非常欢迎改善文档,如果想做出自己的贡献,加入vger.kernel ...

  7. Python学习文档指引

    Python文档资源: 形式 角色 #注释 文件中的文档 dir函数 对象中可用属性的列表 文档字符串:__doc__ 附加在对象上的文件中的文档 PyDoc:help函数 对象的交互帮助 PyDoc ...

  8. PHP初中高级学习在线文档下载

    收集了一些框架的学习文档与手册,视频教程,给大家带来了更多的方便,只要收藏与保存于百度云盘就好了,省去了网上到处寻找的时间!大家有需要就收藏保存起来吧! 如果不能下载请到群内获取新的下载地址 QQ群 ...

  9. NVelocity介绍，NVelocity中文手册文档及实例下载

    NVelocity是什么velocity英音:[vi'lɔsiti]美音:[və'lɑsətɪ]近在做一个项目,客户要求有网站模板功能,能够自主编辑网站的风格,因为这个系统是为政府部门做子站系统,举个 ...

  10. smarty3.0中文手册文档API及使用指南

    1.安装Smarty3.0一.什么是smarty?smarty是一个使用PHP写出来的模板PHP模板引擎,它提供了逻辑与外在内容的分离,简单的讲,目的就是要使用PHP程序员同美工分离,使用的程序员改变 ...

随机推荐

  1. PPT-产品页图片并茂

    一.好的文案原则 图片并茂 -重点突出 二.操作 抠图 拷贝图片到ppt页面->选中图片->双击删除背景->标记要删除的区域 背景替换 1.复制图片->粘贴->置于底层 ...

  2. C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）

    前言 C#/.NET/.NET Core技术前沿周刊,你的每周技术指南针!记录.追踪C#/.NET/.NET Core领域.生态的每周最新.最实用.最有价值的技术文章.社区动态.优质项目和学习资源等. ...

  3. 【Unit1】表达式化简（层次化设计）-作业总结

    三次作业围绕表达式化简展开,逐次递进.主体思路为:递归下降解析表达式保存至类中,依据相关模式化简,依照规范输出字符串. 1.第一次作业 1.1 题目概述 表达式 = 项 + 项 + ... 项 = 因 ...

  4. k8s node节点报错 dial tcp 127.0.0.1:8080: connect: connection refused

    前言 在搭建好 kubernetes 环境后,master 节点拥有 control-plane 权限,可以正常使用 kubectl. 但其他 node 节点无法使用 kubectl 命令,即使同步过 ...

  5. 变速精灵+百D网盘

    首先找一下相对低一点版本的客户端,比如7.26.10 https://issuepcdn.baidupcs.com/issue/netdisk/yunguanjia/BaiduNetdisk_7.26 ...

  6. Tiki靶机练习

    Scan 先arp-scan -l扫描附件主机ip nmap -sS -sV -n -T4 -p- 192.168.93.132 Starting Nmap 7.94SVN ( https://nma ...

  7. cxDBTreeList：最简单的节点图标添加方法

    先在窗体上放ImageList关联到cxDBTreeList,在cxDBTreeList的GetNodeImageIndex事件中写如下: procedure cxDBTreeList1GetNode ...

  8. 【SpringCloud】zuul路由网关

    zuul路由网关 概述描述 路由基本配置 路由访问映射规则 查看路由信息 过滤器 太老旧了,就不做了解了

  9. nrm

    nrm npm install -g nrm nrm ls nrm use taobao Tips:不要使用cnpm,会有些奇怪的问题,导致npm install失败. 参考

  10. SMU Autumn 2024 Trial 1

    A. Load Balancing 很明显题意要的就是让我们把每个数往平均值靠,这样就保证最大值-最小值最小 但是当sum%n !=0的时候就说明无法每个数都等于sum/n,所以处理的方法就是,先计算 ...