怎样在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)
如果文章内容或图片资源失效或者您对文章有异议,请留言反馈或点击右下角邮件图标发送邮件说明情况,我们会及时处理,谢谢!
  • 代码实现网站外链自动转换为内链
    实现步骤: 首先复制以下代码,添加到主题目录下的function.php文件中 /*  *自动给文章的外部链接添加nofollow属性  */    add_filter('the_content','web589_the_content_...
  • PHP输入密码才能访问这个页面的代码
    给任意php页面增加一个密码保护,需要输入正确密码才能访问 <html> <head> <title>title</title </head> <body> 输入密码才能访问...
  • official多用途企业门户官网类WordPress主题自适应wordpress企业主题
    official多用途企业门户官网类WordPress主题WordPress企业主题是由歪主题出品的一款比较简洁实用非常简单的一款wordpress企业类型主题,主题虽然包含多项设置选项,但真正需要设置的很少很少,所以无论你有无经验都可以轻...
  • DUX主题文章页相关推荐双栏显示
    DUX主题是themebetter原创开发的一款基于WordPress程序的多功能主题,响应式布局,不同设备不同展示效果,简洁大气  ,多设备支持、优化SEO,适用于垂直站点、科技博客、个人站,目前我站点使用的就是DUX主题,作为一个喜欢折...
  • 纯代码实现WordPress文章页展开收缩功能
    网上关于实现文章内容“展开/收缩”效果的方法有很多,但是有很多代码似乎已经不可用,而另一些虽然可用但是前端显示效果不怎么美观,于是我便根据网上的一些代码进行了些许的改动便有了这篇文章。下面我们就来具体了解下如何实现文章内容的“展开/收缩”功...
  • 为亮点功能添加快捷按钮
    其实该功能主要是通过 CSS 样式的调整来实现的,实现方式虽然简单但是前端显示效果确实不错,官方给出的调用方式也极其简单,通过下面两行代码调用: <ol class="liangdian"> <li><stro...
  • WordPress 后台文章编辑器添加下拉式短代码选择
    // 后台编辑器添加下拉式按钮 function wzt_select(){ echo ' <select id="short_code_select"> <option value="请选择一个短代码!!!">插入...
  • 五个步骤提升你的WordPress安全等级
    我敢肯定你周围肯定有关于WordPress安全的小故事,或者是数据库被入侵,或者是网站被挂马,甚至整个网站都没了。因此,是非常有必要地针对WordPress执行一些安全措施,尽可能降低WordPress因漏洞而被黑客做手脚。 如何提高你的W...
  • 七大免费WordPress画廊相册插件
    如果你正在准备建立一个以图片为主的WordPress博客,你可能需要考虑图片展示的问题。如果直接平铺一张张展示,貌似显得有点乏味,且会将页面拉得很长。WordPress自带的相册功能,有比较单一。 So,今天的主题是图片和图片相册。事不宜迟...
  • VyprVPN客户端图文使用教程
    无法提供摘要。这是一篇受保护的文章。
  • WordPress 批量删除所有文章的特色图像
    说到 WordPress 的特色图像功能,相信大家都比较熟悉了,今天分享 批量删除所有文章的特色图像 的方法,或许有些朋友会用得上。将下面的代码添加到当前主题的 functions.php : /** * WordPress 批量删除所有文...
  • wow.js中各种特效对应的类名
    一、(页面在向下滚动的时候,有些元素会产生细小的动画效果。虽然动画比较小,但却能吸引你的注意。) 刚知道wow.js这个插件,之前访问别的网站下拉滚动条会出现各种效果感觉特别神奇,现在自己依葫芦画瓢也能弄出来这种效果了。 虽然效果出来了,但...

评论 抢沙发



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

支付宝扫一扫打赏

微信扫一扫打赏