如何让WordPress网站支持Font Awesome图标工具

2020年5月1日01:08:58 发表评论 13 人围观

我们是不是经常看到有些网站导航菜单前面有一些小图标,这些小图标并不是真图片格式,而是用的Font Awesome样式图标。我们有些主题中是带有这些功能的,如果我们主题没有自带也可以增加这个功能,具体如何引用Font Awesome图标工具样式呢?

这里有两个办法可以实现,一个是直接用插件,一个是用代码。

第一、插件实现

我们可以直接搜索Font Awesome Icons插件安装激活。然后根据需要进行添加到内容、导航中都可以。

第二、代码实现

我们可以下载Font Awesome样式放到我们当前主题对应目录:

文件:https://github.com/FortAwesome/Font-Awesome/zipball/master

然后我们需要在配置文件引用。

<code class=" language-none"><span class="pln">add_action</span><span class="pun">(</span> <span class="str">'wp_enqueue_scripts'</span><span class="pun">,</span> <span class="str">'load_fontawesome_styles'</span> <span class="pun">);</span>
<span class="kwd">function</span><span class="pln"> load_fontawesome_styles</span><span class="pun">(){</span>
    <span class="kwd">global</span><span class="pln"> $wp_styles</span><span class="pun">;</span><span class="pln">
    wp_enqueue_style</span><span class="pun">(</span> <span class="str">'font-awesome'</span><span class="pun">,</span><span class="pln"> get_template_directory_uri</span><span class="pun">()</span> <span class="pun">.</span> <span class="str">'/font-awesome/css/font-awesome.min.css'</span> <span class="pun">);</span><span class="pln">
    wp_enqueue_style</span><span class="pun">(</span> <span class="str">'font-awesome-ie7'</span><span class="pun">,</span><span class="pln"> get_template_directory_uri</span><span class="pun">()</span> <span class="pun">.</span> <span class="str">'/font-awesome/css/font-awesome-ie7.min.css'</span> <span class="pun">);</span><span class="pln">
    $wp_styles</span><span class="pun">-></span><span class="pln">add_data</span><span class="pun">(</span> <span class="str">'font-awesome-ie7'</span><span class="pun">,</span> <span class="str">'conditional'</span><span class="pun">,</span> <span class="str">'lte IE 7'</span> <span class="pun">);</span>
<span class="pun">}</span></code>

注意对应引用Font Awesome文件。然后我们可以根据样式来修改需要设置图标。

<code class=" language-none"><span class="tag"><i</span> <span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-camera-retro"</span><span class="tag">></i></span></code>

比如这个可以设置照相机的图标。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: