Font Awesome字体库使用详情

原创

天码行空

修改于 2025-08-05 11:49:33

1810

文章被收录于专栏：前端框架前端框架

Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。

使用文档：

https://fa4.uihtm.com

Font Awesome 是一套完美的图标字体库及CSS架构,主要目的是和 Bootstrap 搭配使用。

Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。

Font Awesome已经为你准备了将近500个常用icon图标（还在不断更新），能大能小，能随便修改颜色，完全开源，完全免费。

使用方法:

要使用Font Awesome图标，请在HTML页面的部分中添加以下行：

1、国内推荐 CDN：

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

2、海外推荐 CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

3、直接下载到本地

注意：不太建议下载来安装，直接在 html 文档头部引用 CDN 文件即可。

注意：本教程使用的是 4.7.0 版本。

您可以使用前缀 fa 和图标的名称来放置 Font Awesome 图标。

实例：

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Document</title>  
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">  
</head>  
<body>  
<div>  
<i class="fa fa-car" style="font-size:48px;color:red;"></i>  
</div>  
</body>  
</html>

结果： Font Awesome 设计为与内联元素一起使用。和元素广泛用于图标。

另外注意，如果更改图标容器的字体大小或颜色，图标会更改。

大图标

fa-lg (增加33％)，fa-2x，fa-3x， fa-4x，或 fa-5x 类用于增加相对于其容器的图标大小。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
  <i class="fa fa-camera-retro fa-lg"></i> fa-lg <br>
<i class="fa fa-camera-retro fa-2x"></i> fa-2x <br>
<i class="fa fa-camera-retro fa-3x"></i> fa-3x <br>
<i class="fa fa-camera-retro fa-4x"></i> fa-4x <br>
<i class="fa fa-camera-retro fa-5x"></i> fa-5x <br>
</body>
</html>

效果：

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

前端

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

前端

登录后参与评论

0 条评论

热度