FontAwesome基础知识

2023-12-11 20:30:28 浏览数 (1)

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

基本介绍及用法

基本介绍

  1. FontAwesome是一套绝佳的图标字体库
  2. 提供可缩放的矢量图标
  3. 可以使用CSS提供的所有特性进行更改，包括：大小、颜色、阴影或者其他支持的效果。
  4. 一个字库，图标种类丰富、高分屏完美呈现。
  5. 无需依赖JavaScript、完美兼容其他框架。
  6. 无限缩放、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样式。

引入方式

代码语言：javascript复制
// 引用所有
<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-pdfbrands-pdfregular-pdflight-pdfduotone-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

伪类用法

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

代码语言：javascript复制
<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

代码语言：javascript复制
<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替换无序列表中的默认项目符号。
代码语言：javascript复制
<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 一起添加到图标中，使图标颜色为白色。
代码语言：javascript复制
<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)

  • 将两个图标结合起来可以创建一种单色形状，可以与强化变形结合。
代码语言：javascript复制
<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元素属性任意缩放、定位、翻转和旋转图标。
  • 缩放比例：放大或缩小图标
  • 定位：改变图标位置
  • 旋转与翻转
代码语言：javascript复制
<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。

代码语言：javascript复制
<!--图标数量-->
<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

在图标右上方添加一个计数器

css camera class script 搜索

0 人点赞