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. 炸裂：SpringAI内置DeepSeek啦！

    好消息,Spring AI 最新快照版已经内置 DeepSeek 了,所以以后项目中对接 DeepSeek 就方便多了.但因为快照版会有很多 Bug,所以今天咱们就来看稳定版的 Spring AI 如 ...

  2. day:2 软件测试流程——H模型

    软件测试流程_H 模型 一.详细流程 1.产品召开需求澄清会议,产品.开发.测试都参加 2.测试和开发拿到需求 3.测试经理拿到需求,根据需求编写测试计划 测试计划(内容:测试目的,背景,范围,测试准 ...

  3. 企业付款到零钱（微信小程序提现，用户提现到零钱）

    pom 增加 <dependency> <groupId>com.github.binarywang</groupId> <artifactId>wei ...

  4. 【博客搭建】Latex数学书写笔记

    [博客搭建]Latex 数学书写笔记 Latex 是一种文档书写语言,支持大量的特殊字符,包括书写数学公式,并且很多 Markdown 环境都支持该语言. 布局实现 靠左:使用内联数学块$...$. ...

  5. autMan奥特曼机器人-安装或更新golang依赖

    autMan2.3.4及以上需要更新中间件或安装golang依赖,参照下列步骤: 一.直装版本 ssh下进入autMan文件夹下plugin/scripts下面输入以下指令: go get -u gi ...

  6. 响应式编程之Reactive Streams介绍

    Reactive Streams 是一种用于‌异步流处理的标准化规范,旨在解决传统异步编程中的背压管理.资源消耗及响应速度等问题‌. 一.核心概念 ‌基本模型‌ ‌发布者(Publisher)‌:负责 ...

  7. allure 报告空白

    在pycharm 运行py文件后生成的报告内容空白: 尝试方法 替换allure版本号---不好用 用命令生成.html测试报告,再以浏览器形式打开 ** ** 命令 allure generate ...

  8. go errors转string

    前言 在 Go 中如果声明了两个字符相同的错误,但命名是新的变量,此时两个错误不相等 package main import ( "errors" "fmt" ...

  9. dify 1.0.1无法在ollama下新增LLM模型

    原来在0.15很正常,升到1.0.0之后就不行 了,再后来1.0.1出来后,以为问题都解决了,没想到还是有问题. 具体是:添加ollama是容易了,但是添加模型(比如deepsek)还是不行.表现为点 ...

  10. selenium自动化测试+OCR-获取图片页面小说

    随着爬虫技术的发展,反爬虫技术也越来越高. 目前有些网站通过自定义字体库的方式实现反爬,主要表现在页面数据显示正常,但是页面获取到的实际数据是别的字符或者是一个编码.这种反爬需要解析网站自己的字体库, ...