利用Font Awesome图标库为自己的网站页面添加矢量图标

昊虹AI笔记

于 2023-10-26 18:09:15 发布

阅读量493

点赞数

分类专栏： Web开发文章标签：前端

本文链接：https://blog.csdn.net/wenhao_ir/article/details/134055682

版权

Web开发专栏收录该内容

49 篇文章 1 订阅

订阅专栏

Font Awesome是一种广泛使用的图标库，它提供了大量的矢量图标，可以轻松地用于网页和应用程序的设计。这个图标字体库非常流行，因为它具有以下优点：

矢量图标：Font Awesome图标是矢量图形，这意味着它们可以以任何大小进行缩放，而不会失真。这使它们非常适合响应式设计，因为它们可以根据不同的屏幕尺寸进行缩放。
易于使用：Font Awesome图标可以像文字一样轻松地插入到HTML文档中。您只需要使用特定的CSS类来定义图标，然后浏览器将根据这些类渲染图标。
定制性：Font Awesome提供了多种不同的图标，从社交媒体图标到各种常见UI元素。您还可以使用CSS来自定义这些图标的颜色、大小和其他样式属性。
跨浏览器支持：Font Awesome得到了广泛的浏览器支持，包括各种现代浏览器和移动设备浏览器。这意味着无论用户使用哪种浏览器，图标都会正确显示。
开源：Font Awesome是一个开源项目，可以免费使用，也有一个付费版本（Font Awesome Pro）提供额外的功能和图标。

Font Awesome的官方网址如下：
https://fontawesome.com/
有人做了一个Font Awesome的中文站，非Font Awesome的官方网站，但是对国内用户更友好。网址如下：
https://fontawesome.com.cn/

在Font Awesome的中文站即可下载Font Awesome的包，注意，如果是开发网页的话，需要用web包，而不是desktop包。
在这里插入图片描述
为以防万一，我这里也提供一个 fontawesome-free-6.4.0-web.zip 的百度网盘下载链接给大家：
https://pan.baidu.com/s/1HD9LmiDt2YOT0T7d_hM8EA?pwd=8zll

利用HTML的<i>标签可以很方便的调用Font Awesome图标库。

注意：我们在官方可以查到调用图标的代码，但是需要把获取的代码中的fal、far、fas、全部换成是fa才可以。昊虹君目前也不知道这是怎么回事。

“fal” 表示 Font Awesome Light 样式，这是一种轻量级的图标风格，可能是为了显示斜长方形图标。
“far” 表示 Font Awesome Regular 样式，这也是一种不同的图标风格，可能导致竖长方形图标。
“fas” 表示 Font Awesome Solid 样式，这是最常用的默认样式，它通常会显示您期望的图标。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="fontawesome-free-6.4.0-web/css/all.min.css">
	<title>Awesome示例</title>
</head>
<body>

<p><i class="fa fa-bars"></i></p>

<p><i class="fa fa-barcode"></i></p>

<p><i class="fa fa-beer"></i></p>

<p><i class="fa fa-glass-cheers"></i></p>

</body>
</html>