一、简介
Font Awesome 是一款免费且开源的图标集合，它主要包含大量使用于 Web 上的矢量图标。这个集合的图标有标志、方向、网站和应用程序、控制屏幕某些信息的符号等等，这让它成为一个完美的技术产品标配。
Font Awesome 使用方式简单，对于初学者来说是一项好的资源。该图标集在技术社区非常受欢迎，因为它可以随意调整图标大小、颜色和使用API动态加载。
二、安装使用
使用 font-awesome 最基本的方式是直接用 <link> 标签将其引入到 <head> 中：
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" integrity="sha384-50oBUHEmvpQ+‘ DdEuT/lC7tbLsOt9QrqVRuLzC6Ql‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘‘ crossorigin="anonymous">
在引入样式后，就可以使用 Font Awesome 图标库了。以下示例演示如何使用 Font Awesome 中的打电话图标：
<i class="fas fa-phone"></i>
Font Awesome 提供了各种图标，每个图标都有特定的 CSS 类用于与 HTML 一同使用。使用 Font Awesome 图标只需要在标签中添加相应的 CSS 类，同时在命名空间中引用它。
三、常用技巧
1、调整大小
使用 Font Awesome 的可调整大小是其中一项最棒的功能之一。可以通过在图标框架的父元素上设置不同的 font-size 属性来定义所需的图标大小，同时实现高度定制化的目的：
<div style="font-size: 2em;">
<i class="fas fa-envelope-open-text"></i>
</div>
2、更改颜色
更改图标的颜色也非常简单。可以使用 CSS 的 color 属性来更改 Font Awesome 图标的颜色。下面的代码使正在上传数据的图标从默认的黑色变为红色：
<i class="fas fa-spinner" style="color: red"></i>
3、组合图标
有时候我们需要将多个图标作为一个组件使用。Font Awesome 允许我们使用不同的标签和 CSS 类来组合图标。以下示例演示了如何在放大镜和搜索图标之间组合一个“+”：
<span> <i class="fas fa-search"></i> <i class="fas fa-plus"></i> <i class="fas fa-search"></i> </span>
4、通过API动态加载
Font Awesome 5 提供了内置的 JavaScript API，允许在运行时从主机自动加载图标。
有两种方法可以使用 Font Awesome API 动态加载图标。
方法1：
// 创建一个 元素
var faI = document.createElement('i');
// 添加 fa 和 fa-user 两个 CSS 类
faI.className = 'fa fa-user';
// 添加 faI 元素到按钮内
document.querySelector('#my-btn').appendChild(faI);
方法2：
// 使用fa-library 版本的 Font Awesome 5，开始加载
window.FontAwesomeKitConfig = {
asyncLoading: {
enabled: true
}
};
// 创建一个 元素
var faI = document.createElement('i');
// 添加 fa 和 fa-user 两个 CSS 类
faI.className = 'fas fa-user';
// 添加 faI 元素到按钮
document.querySelector('#my-btn').appendChild(faI);
四、结论
Font Awesome 作为一款免费开源的图标集合，拥有众多的图标和易于使用的 API，使得它可以快速地集成到各种应用程序和网站中。通过上述技巧，我们可以调整图标大小和颜色，组合图标，甚至是在运行时使用API 动态加载。
原创文章，作者：EOLZX，如若转载，请注明出处：https://www.506064.com/n/370889.html
微信扫一扫 
支付宝扫一扫 