Initial Commit

src/content/posts/2024/01/wp-167.md

@@ -0,0 +1,38 @@
+---
+cover: "https://image.luming.cool/i/2026/05/10/69fff0bd17683.webp"
+title: "【WordPress美化】为您的网站引用Font Awesome图标库"
+pubDate: "2024-01-14T00:18:04.000Z"
+updatedDate: "2024-01-14T00:18:04.000Z"
+categories:
+  - "生活"
+tags:
+  - "WordPress"
+comments: true
+---
+
+<h2>前言</h2>
+大家好，我是路明。这篇文章，我们来聊聊如何给自己的博客引用FontAwesome图标库。
+<h2>用途</h2>
+图标库是用来装饰博客元素的一种渠道，而FontAwesome图标库则是一款比较成熟的图标库，拥有的图标数量很多，能够满足绝大部分用户的需求。
+
+要在WordPress博客中引用FontAwesome图标库，前提条件是您的WordPress主题内置了图标库，否则引用图标库是无效的。常见的具有FontAwesome图表库的主题有：Argon、CorePress（标准版）、Puock等。
+
+大家可以看一下这两幅图对比一下效果：
+
+<img src="https://luming-website.chgskj.cn/luming-notes/2024/01/20240114000540967554.webp" />
+
+<img src="https://luming-website.chgskj.cn/luming-notes/2024/01/20240114001007849069.webp" />
+
+<img src="https://luming-website.chgskj.cn/luming-notes/2024/01/20240114001246210644.webp" />
+
+可以非常直观地发现，加入图标后的菜单项显得更加灵动且自然，使访客可以更直观地理解菜单项的内容。那么如何引用图标库呢？
+<h2>引用</h2>
+使用<code>&lt;i class="fa fa-图标名称" aria-hidden="true"&gt;&lt;/i&gt;</code> 即可引用。例如我要引用<img src="https://luming-website.chgskj.cn/luming-notes/2024/01/20240114001857355129.webp" />这个图标，则需要输入<code>&lt;i class="fa fa-home" aria-hidden="true"&gt;&lt;/i&gt;</code> 这段代码。
+
+<img src="https://luming-website.chgskj.cn/luming-notes/2024/01/20240114001951163460.webp" />
+
+若要在博客的菜单项内引用图标库，只需要在项目标题前加入对应的图标代码即可。
+
+要快速地查阅FontAwesome图标内容，可前往<a href="https://fontawesome.p2hp.com/" target="_blank" rel="noopener">FontAwesome中文网</a>查询并自行添加。
+<h2>结束语</h2>
+本期文章就到这里啦，我是路明，我们下期再见！