FontAwesome基础知识

老猫-Leo

发布于 2023-12-11 20:30:28

2300

发布于 2023-12-11 20:30:28

文章被收录于专栏：前端大全前端大全

2019年实习时的 FontAwesome基础知识备份

基本介绍及用法

基本介绍

FontAwesome是一套绝佳的图标字体库
提供可缩放的矢量图标
可以使用CSS提供的所有特性进行更改，包括：大小、颜色、阴影或者其他支持的效果。
一个字库，图标种类丰富、高分屏完美呈现。
无需依赖JavaScript、完美兼容其他框架。
无限缩放、CSS控制。

下载

官网地址：https://fontawesome.com Pro破解版下载：https://prowebber.ru/internet/i-scripts/21650-font-awesome-pro.html

5.x 版本介绍

New Prefix	Icon Style	SVG + JS Filename	Web Font Filename	Availability
fab	Font Awesome品牌	brands.js	fa-brands-400.*	免费
fas or fa(旧版)	Font Awesome实心	solid.js	fa-solid-900.*	免费
far	Font Awesome常规	regular.js	fa-regular-400.*	仅专业版
fal	Font Awesome细体	light.js	fa-light-300.*	仅专业版
fad	Font Awesome双色	duotone.js	fa-duotone-300.*	仅专业版

注意：fa前缀最新版本中已弃用。新的默认设置是实心的fas样式和品牌的fab样式。

引入方式

// 引用所有
<link href="./fontawesome/css/all.css" rel="stylesheet">

// 先引入fontawesome
// 再引入需要的图标类别
<link href="./fontawesome/css/fontawesome.css" rel="stylesheet">
<link href="./fontawesome/css/solid.css" rel="stylesheet">
<link href="./fontawesome/css/regular.css" rel="stylesheet">
<link href="./fontawesome/css/brands.css" rel="stylesheet">
<link href="./fontawesome/css/duotone.css" rel="stylesheet">
<link href="./fontawesome/css/regular.css" rel="stylesheet">

// 同上
<script defer src="./fontawesome/js/all.js"></script>
// 同上，顺序相反。
<script defer src="./fontawesome/js/solid.js"></script>
<script defer src="./fontawesome/js/regular.js"></script>
<script defer src="./fontawesome/js/brands.js"></script>
<script defer src="./fontawesome/js/duotone.js"></script>
<script defer src="./fontawesome/js/regular.js"></script>
<script defer src="./fontawesome/js/fontawesome.js"></script>

图标备忘录

可在官方网址上搜索自己想要的图标
也可直接下载为离线PDF文档搜索自己想要的图标。
本站友情下载：solid-pdf brands-pdf regular-pdf light-pdf duotone-pdf

基本使用

Style	Class	Prefix	Example
实心	fas fa-camera	fas	<i class="fas fa-camera"></i>
细体	fal fa-camera	fal	<i class="fal fa-camera"></i>
双色	fad fa-camera	fad	<i class="fad fa-camera"></i>
品牌	fab fa-camera	fab	<i class="fab fa-camera"></i>
常规	far fa-camera	far	<i class="far fa-camera"></i>

预览实心solid

伪类用法

使用伪类设计添加想要的图标，适用于不想改变文档结构的情况，例如：

<style>
.icon::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }
  .twitter::before {
    font-family: "Font Awesome 5 Brands"; 
    content: "\f099";/* 通过文档查询对应编码 */
  }
</style>

<body>
<span class="icon twitter"></span>
</body>

扩展

图标大小(Sizing Icons)

图标继承其父容器的字体大小，通过以下类，可增大或减小图标大小。

fa-xs	fa-sm	fa-lg	fa-(1-10)x
0.75em	0.875em	2em	1-10em

<i class="fas fa-camera fa-xs"></i>    
<i class="fas fa-camera fa-sm"></i>    
<i class="fas fa-camera fa-lg"></i>    
<i class="fas fa-camera fa-(1-10)x"></i>

固定宽度(Fixed-Width Icons)

在引用的图标的HTML元素上添加fa-fw类，将一个或多个图标设为相同的固定宽度1.25em。

列表中的图标

使用fa-ul和fa-li替换无序列表中的默认项目符号。

<ul class="fa-ul">      
  <li>        
     <span class="fa-li">         
       <i class="fas fa-square "></i>        
     </span>
     <-- 文本 -->
  </li>      
  <li>        
    <span class="fa-li">          
      <i class="fas fa-check-square"></i>        
    </span>
    <-- 文本 -->  
  </li>   
</ul>

动态图标(Animated Icons)

使用 fa-spin 使任意图标旋转，还可以使用 fa-pulse 使其进行多方位旋转。尤其适合 spinner, refresh, 和 fas-cog。

图标旋转	多方位旋转
fa-spin	fa-pulse

旋转(Rotating Icons)

在引用图标时使用fa-rotate-90/180/270类实现旋转（顺时针），或fa-flip-horizontal/vertical/both类实现翻转。

边框+拖动图标(Bordered+Pulled Icons）

使用fa-pull-left和fa-pull-right可实现图标左右浮动， fa-border可给图片添加外框。

Class	Description
fa-border	图标添加外框
fa-pull-right	图标向右浮动
fa-pull-left	图标向左浮动

堆叠(Stacking Icons)

要堆叠多个图标，请使用父级上的 .fa-stack 类，.fa-stack-1x 类用于常规大小的图标，fa-stack-2x 用于较大的图标。 .fa-inverse 可以与 .fa-stack-1x 或 .fa-stack-2x 一起添加到图标中，使图标颜色为白色。

<span class="fa-stack">
  <i class="fas fa-* fa-stack-2x"></i>
  <i class="fab fa-* fa-stack-1x fa-inverse"></i>
</span>

图标遮罩(Masking Icons)

将两个图标结合起来可以创建一种单色形状，可以与强化变形结合。

<i class="fas fa-*" data-fa-transform="shrink-* up-*" data-fa-mask="fas fa-*"></i>

注意：图标屏蔽要求使用SVG + JS版本的FontAwesome。

强化变形(Power Transform)

借助Font Awesome 5中SVG的强大功能，现在可以使用data-fa-transform元素属性任意缩放、定位、翻转和旋转图标。
缩放比例：放大或缩小图标
定位：改变图标位置
旋转与翻转

<i class="fas fa-*" data-fa-transform="shrink/grow-* up/right/down/left-* rotate-* flip-v flip-h"></i>

分层/文本和计数器(Layering,Text and Counters)

图层是一种将图标和文本视觉上彼此叠加的新方法。通过这种新方法，可以使用2个以上的图标。

注意：分层、文本和计数器也要求使用SVG + JS版本的FontAwesome。

<!--图标数量-->
<span class="fa-layers" style="background:red">
  <i class="fas fa-circle"></i>
  <i class="fas fa-bath fa-inverse" data-fa-transform="shrink-10 left-3"></i>
  <i class="fas fa-bed fa-inverse" data-fa-transform="shrink-10 right-3"></i>
</span>
<!--添加文本-->
<span class="fa-layers" style="background:red">
  <i class="fas fas fa-circle"></i>
  <span class="fa-layers-text fa-inverse" style="font-weight:100" data-fa-transform="shrink-7">123</span>
</span>

Layering Components	Description
fa-layers	包装图标或文字堆叠
Inner icons	在fa-layers元素内添加任意数量的图标
fa-layers-text	在fa-layers元素内添加以将文本放在图标顶部
fa-layers-counter	在图标右上方添加一个计数器