如何在 HTML 中使用 Font Awesome 图标
2024-06-21 05:18:03
Font Awesome 图标是在 html 页面中显示图标的好方法。它简单、快速且免费。是的！免费。谁不喜欢免费的东西，嗯？在这里，我将展示如何在您的 html 页面中安装和使用 font-awesome。但是，就在那之前，你可能想问——
（免责声明-这篇文章包含附属链接。）
什么是字体真棒？
让我们先看看 font-awesome 到底是什么，
Font Awesome 是一个包含 675 个可缩放矢量图形的集合，可以在大小、颜色和几乎任何可以使用 CSS 对任何字体完成的操作上进行操作。简而言之，它们看起来像图标，但您可以将它们作为字体处理。
有两种方法可以在你的 html 中集成 font-awesome -
1. Font Awesome Link (CDN)
2. 下载和安装
字体真棒链接（CDN）：
这是在您的 html 页面 <head> 标记中仅使用一行代码即可获得令人敬畏的字体的最简单方法。在这种情况下无需下载、安装或配置。只需一行代码，您就可以开始了 -
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">下面的示例显示了如何在您的 html 页面中使用此代码 -
<!Doctype html>
<html><head><title>Font Awesome Example</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></head><body><i class="fa fa-futboll-0"></i><i class=" fa fa-futboll-0" style="font-size:50px;"></i><i class=" fa fa-futboll-0" style="font-size:60px; color:red;"></i></body>
</html>下载并安装
在您的项目中使用 CDN 链接并不总是更好，因为它仅在您的设备连接到互联网时才有效，例如，在生产模式下。但是在开发模式下，如果你想在没有任何互联网连接的情况下使用字体真棒图标，你可以下载字体真棒包并将其解压缩到你的项目目录中，并将此代码添加到 <head> 标签中 -
<link rel="stylesheet" href="myProjectPath/font-awesome/css/font-awesome.min.css">此示例显示如何在您的 html 页面中使用此代码 -
<!Doctype html>
<html><head><title>Font Awesome Example</title><link rel="stylesheet" href="myProjectPath/font-awesome/css/font-awesome.min.css"></head><body><i class="fa fa-futboll-0"></i><i class=" fa fa-futboll-0" style="font-size:50px;"></i><i class=" fa fa-futboll-0" style="font-size:60px; color:red;"></i></body>
</html>
如何使用字体真棒？
现在我们知道如何在我们的项目中集成 font-awesome。现在让我们通过一些示例来看看如何使用它-
更大的图标：
<!DOCTYPE html>
<html><head><title>Font Awesome Example – Larger Icons</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><style>* {font-family:monospace, sans-serif;}table, td, th { border: 1px solid #ddd;text-align: left;}table {border-collapse: collapse;width: 100%;}th, td {padding: 15px;}</style></head><body><h1>Font Awesome Example – Larger Icons</h1><table><tr><th>Icon</th><th>Code</th></tr><tr><td><i class="fa fa-briefcase "></i></td><td><i class="fa fa-briefcase "></i></td></tr><tr><td><i class="fa fa-briefcase fa-2x "></i></td><td><i class="fa fa-briefcase fa-2x "></i></td></tr><tr><td><i class="fa fa-briefcase fa-3x "></i></td><td><i class="fa fa-briefcase fa-3x "></i></td></tr><tr><td><i class="fa fa-briefcase fa-4x "></i></td><td><i class="fa fa-briefcase fa-4x "></i></td></tr><tr><td><i class="fa fa-briefcase fa-5x "></i></td><td><i class="fa fa-briefcase fa-6x "></i></td></tr></table></body>
</html>
结果 ：
列表图标：
<!DOCTYPE html>
<html><head><title>Font Awesome Example – List Icons</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><style>* {font-family:monospace, sans-serif;}table, td, th { border: 1px solid #ddd;text-align: left;}table {border-collapse: collapse;width: 100%;}th, td {padding: 15px;}</style></head><body><h1>Font Awesome Example – List Icons</h1><table><tr><th>Icon List</th><th>Code</th></tr><tr><td><ul class="fa-ul"><li><i class="fa-li fa fa-check-square"></i> List Item 1 </li><li><i class="fa-li fa fa-check-square-o "></i> List Item 2 </li><li><i class="fa-li fa fa-square-o"></i> List Item 3 </li></ul></td><td><pre><ul class="fa-ul"><li><i class="fa-li fa fa-check-square"></i> List Item 1 </li><li><i class="fa-li fa fa-check-square-o "></i> List Item 2 </li><li><i class="fa-li fa fa-square-o"></i> List Item 3 </li></ul></pre></td></tr></table></body>
</html>
结果：
装载机/旋转器图标：
<!DOCTYPE html>
<html><head><title>Font Awesome Example – Loaders / Spinners Icons</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><style>* {font-family:monospace, sans-serif;}table, td, th { border: 1px solid #ddd;text-align: left;}table {border-collapse: collapse;width: 100%;}th, td {padding: 15px;}</style></head><body><h1>Font Awesome Example – Loaders / Spinners Icons</h1><table><tr><th>Icon Spinners</th><th>Code</th></tr><tr><td><i class="fa fa-spinner fa-spin fa-2x"></i></td><td><i class="fa fa-spinner fa-spin fa-2x "></i></td></tr><tr><td><i class="fa fa-circle-o-notch fa-spin fa-2x "></i></td><td><i class="fa fa-circle-o-notch fa-spin fa-2x "></i></td></tr><tr><td><i class="fa fa-refresh fa-spin fa-2x "></i></td><td><i class="fa fa-refresh fa-spin fa-2x "></i></td></tr><tr><td><i class="fa fa-cog fa-spin fa-2x "></i></td><td><i class="fa fa-cog fa-spin fa-2x "></i></td></tr></table></body>
</html>
结果 ：
颜色图标：
<!DOCTYPE html>
<html><head><title>Font Awesome Example – Color Icons</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><style>* {font-family:monospace, sans-serif;}table, td, th { border: 1px solid #ddd;text-align: left;}table {border-collapse: collapse;width: 100%;}th, td {padding: 15px;}</style></head><body><h1>Font Awesome Example – Color Icons</h1><table><tr><th>Icon</th><th>Code</th></tr><tr><td><i class="fa fa-gamepad fa-3x" style="color:green" ></i></td><td><i class="fa fa-gamepad fa-3x "> style="color:green" </i></td></tr><tr><td><i class="fa fa-heartbeat fa-3x " style="color:red" ></i></td><td><i class="fa fa-heartbeat fa-3x "> style="color:red" </i></td></tr><tr><td><i class="fa fa-fire fa-3x " style="color:orange" ></i></td><td><i class="fa fa-fire fa-3x "> style="color:orange" </i></td></tr><tr><td><i class="fa fa-gift fa-3x " style="color:blue" ></i></td><td><i class="fa fa-gamepad fa-3x "> style="color:blue" </i></td></tr></table></body>
</html>
结果 ：
只有图标的按钮：
<!DOCTYPE html>
<html><head><title>Font Awesome Example – Buttons with only icon</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><style>* {font-family:monospace, sans-serif;}table, td, th { border: 1px solid #ddd;text-align: left;}table {border-collapse: collapse;width: 100%;}th, td {padding: 15px;}.custom-button {padding: 5px 7px;color: white;background: #FF7043;float:left;margin:2px;border:0;}</style></head><body><h1>Font Awesome Example – Buttons with only icon</h1><table><tr><th>Buttons with only icon</th><th>Code</th></tr><tr><td><button class="custom-button" ><i class="fa fa-sign-in" aria-hidden="true"></i></button></td><td><button class="custom-button" ><i class="fa fa-sign-in" aria-hidden="true"></i></button></td></tr><tr><td><button class="custom-button" ><i class="fa fa-sign-out" aria-hidden="true"></i></button></td><td><button class="custom-button" ><i class="fa fa-sign-out" aria-hidden="true"></i></button></td></tr><tr><td><button class="custom-button" ><i class="fa fa-remove" aria-hidden="true"></i></button></td><td><button class="custom-button" ><i class="fa fa-remove" aria-hidden="true"></i></button></td></tr><tr><td><button class="custom-button" ><i class="fa fa-share" aria-hidden="true"></i></button></td><td><button class="custom-button" ><i class="fa fa-share" aria-hidden="true"></i></button></td></tr></table></body>
</html> 结果 ：
带有图标和文本的按钮：
<!DOCTYPE html>
<html><head><title>Font Awesome Example – Buttons with icon and text</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><style>* {font-family:monospace, sans-serif;}table, td, th { border: 1px solid #ddd;text-align: left;}table {border-collapse: collapse;width: 100%;}th, td {padding: 15px;}.custom-button {padding: 5px 7px;color: white;background: #FF7043;float:left;margin:2px;border:0;}</style></head><body><h1>Font Awesome Example – Buttons with icon and text</h1><table><tr><th>Button with icon & text</th><th>Code</th></tr><tr><td><button class="custom-button" ><i class="fa fa-sign-in" aria-hidden="true"></i> Login</button></td><td><button class="custom-button" ><i class="fa fa-sign-in" aria-hidden="true"></i> Login</button></td></tr><tr><td><button class="custom-button" ><i class="fa fa-sign-out" aria-hidden="true"></i> Logout</button></td><td><button class="custom-button" ><i class="fa fa-sign-out" aria-hidden="true"></i> Logout</button></td></tr><tr><td><button class="custom-button" ><i class="fa fa-remove" aria-hidden="true"></i> Remove</button></td><td><button class="custom-button" ><i class="fa fa-remove" aria-hidden="true"></i> Remove</button></td></tr><tr><td><button class="custom-button" ><i class="fa fa-share" aria-hidden="true"></i> Share</button></td><td><button class="custom-button" ><i class="fa fa-share" aria-hidden="true"></i> Share</button></td></tr></table></body>
</html> 结果 ：
因此，通过以上所有示例，您可以看到在 html 中安装和使用 font-awesome 是多么容易。
字体真棒替代
当谈到矢量图标时，字体真棒是最好的。但它仍然有它的局限性。您可能在 675 个图标的集合中找不到您要查找的图标。此外，有时您需要为您的网站设计一些自定义设计的图标，因为漂亮的图标可以让您的网站更加美观。
最好的字体真棒替代品是世界上最受欢迎的图标网站 iconfinder.com。这个名字本身就说明了整个故事，但是，这里有一些亮点-
- 数以千计的高品质图标 [免费和高级] 可供选择，具有惊人的搜索功能。
- 每个图标有多种尺寸：16 x 16、20 x 20、24 x 24、32 x 32、48 x 48、64 x 64、128、128、256 x 256、512 x 512。
- 每个图标都有多种格式：SVG（矢量）、PNG、ICO、ICNS、Adobe Illustrator。
- 超过1800 多名设计师可 根据您的特定需求获得自定义图标。
- 深受 世界顶级公司信赖：DROPBOX、AMAZON、NETFLIX、SAMSUNG
如果您对 iconfinder pro 感兴趣，可以点击 此处订阅。如果你想玩弄字体真棒图标，你可以在 这里看到字体真棒图标的完整列表。
如何在 HTML 中使用 Font Awesome 图标相关推荐
- 在Unity中使用Font Awesome图标字体
Font Awesome 是一个前端用到的图标字体,简单说是个特殊的字体,里面不是文字都是图标. 用这种方法可以简单的做出即使放大很多也不会出现锯齿的图标,不过好像图标不需要放大很多的说.很好玩就是了 ...
- 如何在Vue中使用Font Awesome？
Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小.颜色.阴影以及任何可以用CSS的样式. 官网地址:http://www.fontawesome.com.cn/ 目录 1.安装依 ...
- vue中使用Font Awesome图标库
Font Awesome地址:Font Awesome 中文网 – | 字体图标 1.vue中安装font awesome:npm install font-awesome --save npm in ...
- 如何在Bootstrap中使用iconMoon字体图标
关于在bootstrap中如何使用iconMoon图标: 1.首先找到iconMoon官网,然后点击import icons导入你的svg图标 2.导入成功进入以下界面,点击Preferences F ...
- 如何在 Vue 中使用 Font Awesome 字体图标
安装 npm install --save @fortawesome/fontawesome-svg-core npm install --save @fortawesome/vue-fontawes ...
- android 文本后图标_如何在Android中更改文本，图标等的大小
android 文本后图标 Let's face it: no matter how good the screens are on our phones and tablets, the text ...
- 如何在uniapp中引入阿里字体图标
在阿里字体图标里面点击下载到本地 然后将解压出来的文件放到static目录下,我的是static/font 然后在App.vue中引入 @import url("./static/font/ ...
- Qt中使用Font Awesome图标字体库
一.简介 Font Awesome号称是为Bootstrap设计的完美图标字体,经常出现在各类网页中,非常流行. 官网: https://fontawesome.com/ 中文网: http://ww ...
- 如何在ToolBar中显示文字和图标,自定义图标大小,并和MenuItem关联
要注意以下几个方面,先后顺序未必正确,有可能多设几次 1.设置ToolBar可以显示文字 ToolBar.ShowCaption := True; 2.设置ToolButton大小 ImageList ...
最新文章
- shell版俄罗斯方块
- hdu(1069)——Monkey and Banana（LIS变形）
- JSTL学习笔记3-----URL相关标签的使用
- python until怎么用_python基础之从认识python到python的使用
- 一个简单的空气质量数据监测站项目
- 云原生的新思考，为什么容器已经无处不在了
- 设计： ListView 接口，and the missing read-only interfaces in java collection framework
- vue 日期格式化返回指定个数月份_python时间与日期处理一次看个够（time、datetime、calendar）...
- 车架号查车辆型号_【菜鸟二手车大讲堂】第十一讲 经常提到的汽车车架号是什么？...
- asp.net 缓存Cache的使用总结
- 思科三层交换机开启ipv6路由功能_三层交换机实现路由功能配置示例与详解 (Cisco Packer Tracer 模拟器）...
- 北斗系统基础知识0（专家解析：北斗卫星导航通信系统起源与发展工作原理）
- python-docx文档高亮显示
- 计算机应用会考试题,余杭区2006年职高计算机应用基础会考试题
- 电梯ic卡信息服务器的线怎么接,2018版IC卡电梯门禁梯控系统软件操作步骤
- 如何实现店铺稳定盈利？做店铺需要知道的几点技巧
- 苹果手机测试手机电平软件,用*3001#12345#*测试iphone信号强度
- 哈工大csapp-LAB3程序优化
- 记csdn打不开或打开缓慢后的修复--如何查找dns并修改hosts文件
- 数据库知识体系框架图01