怎样在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
如果文章内容或图片资源失效或者您对文章有异议,请留言反馈或点击右下角邮件图标发送邮件说明情况,我们会及时处理,谢谢!
  • VMware Workstation 15 Pro 官方简体中文专业版 + 永久激活密钥
    VMware Workstation 15 Pro 官方简体中文专业版 永久激活密钥 系统要求 支持使用 2011 年或更晚发布的处理器 (CPU) 的系统,但以下系统除外: 使用基于 2011 年 Bonnell 微架构的 Intel A...
  • sublime text 3.2.1 3207破解方法
    今天用家里的笔记本想修改一处代码,结果只有DW CC2019版本,这个版本确实有些不顺手,于是下载了官网版本的sublime text 3,各种搜索注册码,终于找到一个还是sublime text 2的勉强能用,但我这样的完美主义者哈哈实在...
  • Windows 10 Version 1903 官方正式版ISO镜像光盘
    微软计划于2019年6月19号面对用户发布 正式版系统镜像,Window 10可以说是微软最成功的一代操作系统,不仅有window XP、window 7的稳定、流畅,还有完美的兼容性,很多经典游戏都可以在window 10中完美运行,所以...
  • 电信光猫TEWA-700G获取超级密码及改桥接方法(不影响IPTV和电话的使用)
    最近刚安装了电信宽带,电信带的光猫有WiFi功能,虽然方便了维护人员和没有路由器的用户,但是送的光猫硬件配置就摆在那儿,性能较弱,且扩展功能基本为零,不能实现ddns、端口转发等功能,所以最好将光猫的拨号和WiFi功能交给路由器,光猫只负责...
  • WordPress在文章列表插入一篇广告跳转文章或在任意位置插入广告代码
    这个Wordpress技巧可以让你在文章列表中的任意位置插入一篇或多篇广告跳转文章,完美的与主题结构融合,与主题列表的展现形式一模一样,不用去额外的改变任何结构!而且可以一键无痕的将发布的任何文章变成广告跳转文章! 实现过程非常简单,利用了...
  • Justnews主题4.0.4破解版包含qapress2.3.1问答插件WordPress主题Justnews破解版
    不知道有需要的小伙伴吗? 你如果需要这个主题 点击查看这里  歪迪资源屋不负责这个主题的发货和服务支持,谁给你发货你找谁就可以了,我们只是这篇文章的搬运工而已! 主题简介 这个就不具体复制过来了,本主题是4.0.4版本的包含问答插件 主题截...
  • WPS Office 2019 11.8.2.8053 专业绿色版
    WPS2019是金山软件公司推出的最新办公系列产品,全新版本在界面上更加美观,易于操作,运行流畅,以其强大的功能和个性化的操作收到许多用户的青睐,是目前网络上广受好评的办公软件系列产品。 WPS2019在多个板块和功能上进行了加强和优化,包...
  • nofollow、noopener和noreferrer标签的区别?
    什么是 noreferrer 标签? 简而言之,noreferrer 标记在单击链接时隐藏引用者信息。如果有人从使用此标记的链接到达您的网站,您的分析将不会显示谁提到该链接。相反,它会错误地显示为您的统计流量报告中的直接流量。 这个 nor...
  • wordpress给你的网页添加一个加载动画
    网页加载需要一个过程,现在这个过程可以极短了,不过有些朋友还是希望能用一个动画来代替这个过程,让加载不再那么枯燥。搜索了一下,很多这类文章,方法很多,利用CSS实现应该是最好的办法了。过程很简单,只需两步。 添加方法 第一步 创建一个css...
  • WordPress插件-Post Expirator 给文章或页面设置一个到期时间
    有些时候,一些文章或页面没必要始终展示,比如公告,活动,广告等,但是对于像我一样的懒人们又不想拐回去关闭文章,或者忘记关闭文章。这是你就需要这样一个插件。 Post Expirator 这个插件使用起来比较简单,功能也够强大,可以为文章或者...
  • 代码实现网站外链自动转换为内链
    实现步骤: 首先复制以下代码,添加到主题目录下的function.php文件中 /*  *自动给文章的外部链接添加nofollow属性  */    add_filter('the_content','web589_the_content_...
  • PHP输入密码才能访问这个页面的代码
    给任意php页面增加一个密码保护,需要输入正确密码才能访问 <html> <head> <title>title</title </head> <body> 输入密码才能访问...

评论 抢沙发



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

支付宝扫一扫打赏

微信扫一扫打赏