WordPress中使用Font Awesome图标

WordPress中使用Font Awesome图标

作者 : 资源客 发布时间: 2019-12-18

Font Awesome 是一种矢量图标,或者叫图标字体,矢量的好处是无限缩放不会失真,可以适应各种尺寸的屏幕,省掉了做很多图片的麻烦。如果你想在自己的 wordpress 主题中使用 Font Awesome,下面介绍了方法。

插件方案:

我的博客有很多代码,但今天我要把插件放在前面,不希望大家觉得在 WordPress 中使用插件就一定会降低性能。相反,我推荐使用插件,插件小巧灵活,即插即用,不想要也可以成本很低的舍弃。只有代码质量较低的插件才会降低网站性能。
Font Awesome Icons就是一个短小精悍的插件:

将 Font Awesome 的 css 和字体文件集成到 WordPress
提供调用图标的 shortcode
代码方案:

如果你要发布自己的主题,向用户提供 font awesome 作为一个卖点,下面是集成方法。
1. 下载Font Awesome,将 font-asesome 文件夹直接解压到你主题的根目录下
2. 打开主题的 functions.php,添加如下代码

add_action( 'wp_enqueue_scripts', 'load_fontawesome_styles' );
    function load_fontawesome_styles(){
        global $wp_styles;
        wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/font-awesome/css/font-awesome.min.css' );
        wp_enqueue_style( 'font-awesome-ie7', get_template_directory_uri() . '/font-awesome/css/font-awesome-ie7.min.css' );
        $wp_styles->add_data( 'font-awesome-ie7', 'conditional', 'lte IE 7' );
    }

这段代码会引入 font awesome 主要的 css 文件,还会条件化加载修复 ie7 的 css 样式。
3. 大功告成,下面就是使用了,使用的方式很多,官方推荐的方法是用 i 标签加 class 来添加,例如:

<i class="fa fa-bullhorn"></i>我是一个小喇叭
我是一个小喇叭
当然,也可以将 class 应用到其它标签,就像使用字体一样,可以设定字号、颜色、阴影等属性。

<i style="font-size: 45px;" class="fa fa-bullhorn"></i>

其它说明:

需要注意的是 font-awesome 的 css 文件和字体文件要保持对应关系,如果你更改了字体目录名称或者位置,不要忘记修改 css 文件。
具体说是修改 font-awesome.css 这个没压缩的文件,打开文件看开头的几行样式

@font-face {
      font-family: 'FontAwesome';
      src: url('../font/fontawesome-webfont.eot?v=3.1.0');
      src: url('../font/fontawesome-webfont.eot?#iefix&v=3.1.0') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.1.0') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.1.0') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.1.0') format('svg');
      font-weight: normal;
      font-style: normal;
    }

url 里写的就是字体文件路径,根据自己的实际情况修改之。之后将其压缩,就可以用了。

http://xzh.i3geek.com
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请不要用于商业用途及非法用途,否则后果自负!
3. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"qq301.com",如遇到无法解压的请联系管理员!
资源客是一个优秀的分享资源站,本站资源均为各位友友分享而来,特殊原创会标明如有侵犯版权等可联系删除

资源客 » WordPress中使用Font Awesome图标