Font Awesome 一个基于CSS和LESS的免费图标库工具包

我们有的时候网页开发中,经常会使用到一些小的图标, 这些小图标都是一些单色调的小图,并且有的时候我们也会根据需求去修改这些小图标的颜色, 例如我们经常看到的淘宝网上就有这样的小图标!

如图

如果这个时候你去使用图片,不仅这些小图标处理起来很费力,而且还会让网页的资源变得相当臃肿!

那么怎么办呢?我们其实可以把这些小图制作成专门的字体, 也就是说把这些小图标弄成类似于文字字体一样, 因为字体形式的情况下,我们就可以任意去修改大小颜色处理起来也是相当方便!

这就叫图标字体 而这种图标字体 已经有很多现成的插件库 我们直接去免费下载就可以了,你完全不需要去知道如何制作的过程,只需要下载下来直接引入使用即可!

目前最常见的图标字体就是阿里巴巴的矢量图标库iconfontFont Awesome

今天我要介绍的就是Font Awesome

Font Awesome 概述

Font Awesome是一款基于CSSLESS免费图标库, 它可以用于个人企业都可以!

最最关键的就是Font Awesome完全免费的,无论个人还是商业使用,怎么样,是不是很爽!

Font Awesome为我们提供了大量的可缩放矢量图标,并且还可以轻松的用CSS来控制大小、颜色、阴影 而且在高分辨率下也会完美高清显示图标,效果相当炸裂, 内含超过5000个图标也完全能够满足我们日常开发的需求!

Font Awesome 下载

首先我们要打开它的官网

地址 fontawesome.com/

如图

然后点击Start for free 免费使用 进入页面然后往下拉,找到download 点击它

如图

进入到下载页面,这里我们就直接选择Free for web(免费网页开发版)下载最新的6.5.1版本

如图

下载完成之后,会出现一个.zip的压缩文件, 至此下载完成!

如图

Font Awesome 部署

当我们下载好了Font Awesome之后,我们就把它解压一下,得到以下目录结构:

如图

这些目录和文件的含义大致意思如下表:

文件夹和文件 它们是什么 使用重点
css/ 用于 Web 字体的 CSS 文件 必要文件
js/ 每种样式的图标和实用程序脚本
less/ 较少的图标和实用程序
LICENSE.txt 详细说明允许使用 Pro 图标的许可证
metadata/ 有关图标的元数据
scss/ 用于 Web 字体的基于 SCSS 的实用程序
sprites/ 图标作为 SVG 精灵
svgs/ 图标作为 SVG
webfonts/ 图标作为 Web 字体用于 CSS 必要文件

你可以将这整个fontawesome-free-6.5.1-web目录拷贝到你的项目文件夹下

如图

展开fontawesome-free-6.5.1-web目录找到css目录下的all.css文件

如图

我们只需要将这个all.css文件通过link标签引入到页面中就完成配置部署了!

如下

html 复制代码
<link rel="stylesheet" type="text/css" href="fontawesome-free-6.5.1-web/css/all.css">

注意:一般在开发测试和学习中我们引用all.css,但是如果在生产环境就使用all.min.css

Font Awesome 使用

引入成功之后,我们现在就可以来使用Font Awesome中的这些图标字体

你也可以去它的官网打开文档看一下使用教程,非常简单!

官方文档地址 fontawesome.com/docs

举个栗子

我们可以直接通过一些class类名称来调用这些图标字体

代码如下

html 复制代码
<ul class="fa-ul">
    <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>重庆市</li>
    <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>北京市</li>
    <li><span class="fa-li"><i class="fa-solid fa-spinner fa-pulse"></i></span>杭州市</li>
    <li><span class="fa-li"><i class="fa-regular fa-square"></i></span>深圳市</li>
</ul>

效果如下

这些class类名称你都不需要去记,直接到官网文档上去查看就可以了!

比如我们现在到: fontawesome.com/search 这里去随便找一个图标字体

注意:不要找带有Pro的图标字体,因为是收费的,找那些没有带Pro的图标字体就行了

如图

然后根据弹出的提示框,选择使用方式, 这里因为我们是在html中使用,所以直接复制代码到页面就可以了!

如图

我们多找几个试试看!

如图

效果如下

我们还可以对图标字体的大小颜色进行修改

例如:我们可以使用官方指定的一些class来相对大小调整

如下表:

相对大小调整class类名称 字体大小 等效像素
fa-2xs 0.625em 10px
fa-xs 0.75 米 12px
fa-sm 0.875em 14px
fa-lg 1.25 米 20px
fa-xl 1.5 米 24px
fa-2xl 2EM的 32px
Literal Sizing 类 字体大小
fa-1x 1em
fa-2x 2EM的
fa-3x 3EM的
fa-4x 4EM的
fa-5x 5EM
fa-6x 6EM
fa-7x 7EM的
fa-8x 8EM系列
fa-9x 9em
fa-10x 10米

我们只要把这些class类名加到标签中就可以了!

举个栗子

html 复制代码
<i class="fa-brands fa-twitter fa-1x"></i>
<i class="fa-brands fa-twitter fa-2x"></i>
<i class="fa-brands fa-twitter fa-3x"></i>
<i class="fa-brands fa-twitter fa-4x"></i>
<i class="fa-brands fa-twitter fa-5x"></i>
<i class="fa-brands fa-twitter fa-6x"></i>
<i class="fa-brands fa-twitter fa-7x"></i>
<i class="fa-brands fa-twitter fa-8x"></i>
<i class="fa-brands fa-twitter fa-9x"></i>
<i class="fa-brands fa-twitter fa-10x"></i>

如图

当然我们也可以使用font-size结合选择器或者内嵌式直接修改图标字体的大小颜色都是可以的!

例如

html 复制代码
<i class="fa-brands fa-twitter fa-10x" style="font-size:380px;color: green"></i>

效果

最后

怎么样,是不是很方便呢! 有了Font Awesome之后我们再也不用去到处找小图标了,也省去了不少麻烦事情,节约了时间,提高了开发效率!

Font Awesome也可以根据需要去结合vue.js、React.js、WordPress等框架系统之中,具体大家可以参考文档,上面都有详细的说明,这里就不过多赘述了!

相关推荐
专注前端30年2 分钟前
2025 最新 Vue2/Vue3 高频面试题(10月最新版)
前端·javascript·vue.js·面试
文火冰糖的硅基工坊34 分钟前
[嵌入式系统-146]:五次工业革命对应的机器人形态的演进、主要功能的演进以及操作系统的演进
前端·网络·人工智能·嵌入式硬件·机器人
2401_837088501 小时前
ResponseEntity - Spring框架的“标准回复模板“
java·前端·spring
yaoganjili1 小时前
用 Tinymce 打造智能写作
前端
angelQ1 小时前
Vue 3 中 ref 获取 scrollHeight 属性为 undefined 问题定位
前端·javascript
Dontla1 小时前
(临时解决)Chrome调试避免跳入第三方源码(设置Blackbox Scripts、将目录添加到忽略列表、向忽略列表添加脚本)
前端·chrome
我的div丢了肿么办1 小时前
js函数声明和函数表达式的理解
前端·javascript·vue.js
云中雾丽1 小时前
React.forwardRef 实战代码示例
前端
朝歌青年说1 小时前
一个在多年的技术债项目中写出来的miniHMR热更新工具
前端
Moonbit1 小时前
倒计时 2 天|Meetup 议题已公开,Copilot 月卡等你来拿!
前端·后端