当前位置: » 技术分享 » wordpress使用Font Awesome字体图标

wordpress使用Font Awesome字体图标

本文共1211个字,预计阅读4分钟。

Font Awesome是一款矢量的图标或可以称为字体图标,他的所有属性都可以通过CSS进行设定,包括:大小、颜色、阴影或者其它任何支持的效果。不旦有效解决了图像加载慢的问题,而且好提供了超过5000+的图标方案。

在wordpress使用到fantawesome字体图标的方式有两种。

  • 第一种呢,通过wordpress后台插件中,去搜索Font Awesome 插件,安装好fontawesome字体图标插件,就可以直接使用了,相对来说比较简单。
  • 第二种方法就是下载好字体图标文件,把 文件载入到我们的wordpress主题中来,合二为一。

本文主要讲关于Font Awesome代码集成的方法(不使用插件 )

第一种 调用第三方的CDN不用占用我们自己的物理空间,直接调用第三方,方便+方便的选择。

最简单的方式:将以下代码 HTML代码,粘贴到网页头部的 部分.

<link href=”//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” rel=”stylesheet”>

当新版本发布时,CDN加载需要一点时间来同步到最新版本。稍安勿躁 🙂

第二种 是下载官方的文件包到我们的本地然后添加到主题包内,进行手动的集成。

1.首先我们要通过官方下载到 fontawesome文件包
将font-asesome文件夹直接解压到你主题的根目录下,( 注意文件的命名 )
2. 打开自己主题的中的 functions.php,添加如下代码

( 注意文件的命名 )
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-camera-retro fa-lg”></i>
喜欢 0
转载请标明出处:创之梦博客
本文地址:http://52czm.cn/?p=1207

1 评论

  • 近期文章
  • 标签云
    css3妙用 (8) H5分享 (4) HTML基础 (4) jquery/js特效 (3) Linux服务笔记 (5) MYSQL笔记 (1) php学习 (6) SEO排名 (2) Vue学习 (2) WP主题制作 (27) 博主推荐 (1) 博客有趣挂件 (1) 玩转重装系统 (3) 网站建设 (2) 美文推荐 (2) 随笔录 (3)
  • pomoshh-psihologa-online :

    pomoshh-psihologa-online pomoshh-psihologa-online

  • 创之梦 :

    离大佬还早着,哈哈哈,这个相对比较基础,还有很多东西

  • 程志辉 :

    点赞!!!感觉越来越大佬了

  • 52czm.cn :

    本博客主题个人原创制作,采用wordpress bootstrap4 ,有兴趣的

  • 52czm.cn :

    留言之前自己做美化感觉效果不是很好 所以用了插件实现 推

  • 52czm.cn :

    看文章的时候,js脚本我怕影响加载速度,文章页我就取消了