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. 记录一次修复 JetBrains Rider 控制台输出乱码

    在使用 JetBrains Rider 调试程序时,控制台输出日志出现了乱码. 歪打正着结果困扰许久的问题得到了解决,于是记录下了这个小短文. 具体的修复建议如下:将终端编码设置为 GB2312 具体 ...

  2. vue element 动态增加表单并进行表单验证

    表单验证:需要注意的一点是: 普通表单验证单项依靠的是prop-而动态生成的表单要用:prop 书写的语法是:prop="'moreNotifyObject.' + index +'.not ...

  3. 【Spring Boot】我的第一个Spring Boot练习

    背景 Spring 在 Java 生态的企业级开发项目中极其常用,通常我们为项目引入一项新技术时,不得不考虑如何将新技术与 Spring 整合在一起. 我们知道,预研一项新技术,我们基于 MVP(最简 ...

  4. QT5笔记： 30. 二进制文件读写

    Qt 预定义类型文件 *.stm 标准二进制文件 *.dat 例子: MainWindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H #include & ...

  5. Scala定义方法，可变参数，默认值，递归

    package com.wyh.day01 object ScalaFun1 { def main(args: Array[String]): Unit = { val result = string ...

  6. c++经典卡常

    1.展开函数 如下代码: void lowbit(int x) { return x&(-x); } signed main() { cout << lowbit(12345); ...

  7. 北京大学DeepSeek系列教程：《DeepSeek与AIGC应用》

    前言 今天大姚分享一个由北京大学推出的DeepSeek系列学习教程<DeepSeek与AIGC应用>,该文档全面介绍了DeepSeek-R1模型的技术特性.应用场景及其在AIGC领域的重要 ...

  8. Postman 提示{"msg":"JSON parse error: Unexpected character (' ' (code 160))

    报错提示{"msg":"JSON parse error: Unexpected character (' ' (code 160)) 解决方案: json 格式选择be ...

  9. Selenium KPI接口 窗口句柄

    应用场景: 当单击主页上的链接时,将打开一个新窗口.在新打开的窗口中,无法执行任何操作,因为焦点仍然在主页Web驱动程序上. 这时候,我们需要把焦点定位到新打开的页面上. 先获取所有窗口a=drive ...

  10. Web前端入门第 14 问：HTML 语义化是什么？

    HELLO,这里是大熊学习前端开发的入门笔记. 本系列笔记基于 windows 系统. 语义化:通俗地说,就是让机器可以理解编写出来的 HTML 代码.比如:搜索引擎.屏幕阅读器等. 非语义化写法 网 ...