Font Awesome 交通工具图标学习笔记

Font Awesome 是一个流行的图标字体库，提供了丰富多样的图标，其中包含许多交通工具类图标，可以很方便的用于开发交通工具相关网站和应用。

如何使用 Font Awesome 交通工具图标

要使用 Font Awesome 交通工具图标，需要在网站或应用中引入 Font Awesome 的 CSS 文件和字体文件。可以通过 CDN 或者将 Font Awesome 下载到本地后引入。

htmlCopy Code
<!-- 引入 CSS 文件 -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-ZznJbTmXUpjHPveXTsUmFYtM4n4kSzIhjG4iK0BgiMShVyPEH1E47Oj2Zk9WNS79" crossorigin="anonymous">

<!-- 引入字体文件 -->
<script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" integrity="sha384-N7oQkFT5AkMnyq+MoKT78jvxrHIb/EdSvD6ftwQr2p9smqqcFdEgJ3Pg5/nvym+E" crossorigin="anonymous"></script>

引入后，便可以使用 Font Awesome 提供的 class 名来显示对应图标。下面是一些常用的 Font Awesome 交通工具图标和对应的 class 名：

• 飞机：fas fa-plane
• 地铁：fas fa-subway
• 公交车：fas fa-bus
• 出租车：fas fa-taxi
• 轮船：fas fa-ship
• 自行车：fas fa-bicycle
• 摩托车/机车：fas fa-motorcycle

下面是一个实例，展示如何使用 Font Awesome 交通工具图标。

htmlCopy Code
<!-- 引入 CSS 和字体文件 -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-ZznJbTmXUpjHPveXTsUmFYtM4n4kSzIhjG4iK0BgiMShVyPEH1E47Oj2Zk9WNS79" crossorigin="anonymous">
<script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" integrity="sha384-N7oQkFT5AkMnyq+MoKT78jvxrHIb/EdSvD6ftwQr2p9smqqcFdEgJ3Pg5/nvym+E" crossorigin="anonymous"></script>

<!-- 显示飞机、地铁和公交车图标 -->
<i class="fas fa-plane"></i>
<i class="fas fa-subway"></i>
<i class="fas fa-bus"></i>

效果如下：

<i class="fas fa-plane"></i> <i class="fas fa-subway"></i> <i class="fas fa-bus"></i>

总结

通过 Font Awesome 提供的交通工具图标，可以很方便的构建交通工具相关网站和应用。在使用时，要注意引入 Font Awesome 的 CSS 文件和字体文件，并使用对应的 class 名显示图标。