怎样在wordpress使用Font Awesome字体图标

本站资源均为站长亲测,真实有效,本站不发表未经验证的资源,请放心参与体验

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

wordpress使用到fantawesome字体图标的方式有两种。第一种呢,通过wordpress插件安装好fontawesome字体图标插件,就可以直接使用了,第二种方法就是把字体图标的文章载入到我们的wordpress主题中来,合二为一。

安装插件在wordpress插件中搜索Font Awesome 默认选择安装即可
Font Awesome Icons是一款短小精悍的插件,功能只有两个:
一、将Font Awesome的css和字体文件集成到WordPress
二、提供调用图标的shortcode

下面是关于Font Awesome代码集成的方法
关于集成也有两种方案一种是调用第三方的CDN不用占用我们自己的物理空间,直接调用第三方,方便+方便的选择。
第二种是下载官方的文件包到我们的本地然后添加到主题包内,进行手动的集成。

最简单的方式:BootstrapCDN (由MaxCDN提供)

将以下代码粘贴到网页HTML代码的 部分.

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

当新版本发布时,BootstrapCDN需要一点时间来同步到最新版本。稍安勿躁 ?

首先我们要通过官方下载到fontawesome文件包

将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-camera-retro fa-lg"></i>
这篇文章如果帮到了你 打赏
分享到: 更多 (0)
0
如果文章内容或图片资源失效或者您对文章有异议,请留言反馈或点击右下角邮件图标发送邮件说明情况,我们会及时处理,谢谢!
  • WordPress一键全站SSL插件:Really Simple SSL
    如果要给WordPress网站设置https,如果是新的网站,是没有问题的,如果是老站,可能会有一些问题: 比如全站资源https的问题,因为老的网站,或多或少都会有一些外链的资源,而这些外链的资源如果不支持https,那么全站https就...
  • 为WordPress添加百度分享按钮侧边悬浮固定效果
    如上图所示,百度分享默认固定在页面左侧边,不管页面向下或者向上滚动,百度分享按钮都会固定悬浮显示; 好了,下面就介绍一下方法吧,其实很简单,在原百度分享代码上添加一段css即可。 1、首先在wordpress后台编辑footer.php文件...
  • 如何彻底移除并关闭WordPress的RSS feed
    WordPress默认开启了feed功能,好处不言而喻,可以方便RSS阅读器进行订阅,让读者及时收到博客的更新信息。但有些博客基本没有人订阅,却有一堆机器人来采集博客的feed,方便了别人复制你的文章不说,还造成了不必要的资源消耗。 阻止采...
  • WordPress 给最新文章和置顶文章添加new和top图标
    wordpress发布文章一般类型是置顶或者在默认正常。如果在置顶文章或者是24小时内最新发布的文章标题加上相应的图标,不仅可以增加美观,也可以提高用户浏览网站的点击率。网上有各种漂亮的图标大家可以自己去搜一下。然后上传网站替换下面代码的图...
  • 每个IP自定义时间弹窗转跳广告代码
    分享一段网页自定义ip时间转跳弹窗的广告代码,支持自定义设置用户IP重复转跳网址的时间,做到每个用户,每个IP一定时间内不重复弹窗的功能。 许多站长接广告的时候,因为弹窗价格比较高,所以经常会选择弹窗广告,不过这样对用户体验非常的差。 但是...
  • WordPress判断文章发布时间是否超过一个月时输出一段声明
    今天走访博客时发现一个小功能挺好的,就是判断文章发布时间是否超过一个月时输出一段声明。 因为百影阁是一个技术型、分享型网站,发布的文章时间久了可能有些技术功能已经过时、图片失效或者下载资源失效,当有访客再次阅读文章时,就应当设定一个友善的提...
  • WordPress为图片加文字/图片水印插件:DX-Watermark
    DX-Watermark是一款方便实用的wordpress添加水印插件,歪博的博客换了无数次水印,使用了很多种水印插件,最终确定在了这个水印插件DX-Watermark,今天,我就为大家推荐一个好用的水印插件,那就是:DX-Watermar...
  • WordPress标签自动别名转换插件:Auto Tag Slug
    很多使用WordPress建站的朋友,都会使用默认的标签格式,英文还好,中文就有些不美观了。虽然中文标签对搜索引擎的收录没有什么影响,但是为了用户体验,还是建议大家把标签别名修改为英文或拼音。可是每次发表文章,再去修改标签别名很繁琐有木有…...
  • 更改WordPress主题之前必须做的15件事
    使用过WordPress的人都应该做过一件事,那就是更换主题。但如果你一直使用的就是默认主题,那就更好办了。WordPress最大的魅力就是,更换主题很简单轻松,但主题的更换不仅仅只是激活就完事了。本文将介绍更改WordPress主题之前必...
  • WordPress自定义登录页面LOGO、链接、文本、样式等
    自定义 WordPress 登录界面 Logo 在主题目录 functions.php 中加入以下代码: //自定义WordPress登录界面Logo function fanly_custom_login_logo() { echo '&...
  • WordPress非插件实现文章点赞功能
    功能丰富的WordPress点赞插件不少,但对于要在主题中集成简单文章点赞功能的需求,插件就显得不合适,于是乎非插件实现文章点赞功能的方法就诞生,实现思路是:可以通过ajax实时显示点赞数量,自定义字段保存赞数量,Cookies禁止重新点赞...
  • WordPress 如何实现纯代码添加禁止某些用户登录的方法
    在某些特殊情况下某些用户损害了网站的利益,你可能就需要禁止他们登录网站,WordPress博客如何实现免插件纯代码添加禁止某些用户登录的方法,也就是WordPress博客用户怎么实现封号,近日以来网站垃圾信息,垃圾回复泛滥,由于之前不怎么关...

评论 抢沙发



觉得文章有用就赞赏支持一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏