ZBlog使用Font Awesome图标的详细教程
Font Awesome图标是什么?大家只要打开自己的主题,看到文章列表页或者文章详情页就可以看到文章标题或者简介下方的发布时间、分类或者浏览量前面的那个小图片就是Font Awesome图标了。
注:并非所有的主题都是用的font awesome图标,例如本站的图标就不是,而是改用了使用稍微复杂一些的阿里图标!这两种图标各有千秋,font awesome图标得使用特别简单,小白也能轻易上手,但可选性实在不多,且样式不是很好看;而阿里图标比较齐全,样式也是各种各样,几乎可以满足任何网站的硬性要求,然而它的使用稍显复杂,第一次接触的人还真不大容易上手!但不用担心,以后我会出一篇教程的,今天先说Font Awesome图标的使用教程。
ZBlog如何使用Font Awesome的教程详解
本问题要分两种情况来说,一种就是作为开发者如何在自己主题中引入和使用Font Awesome图标库,另一种情况就是作为主题的使用者该如何调用主题中已引入的Font Awesome图标库!
一,开发者如何在自己主题中引入和使用Font Awesome图标库
1,下载Font Awesome,去官网下载。
2,文件下载后解压,得到两个文件夹,font和css。上传至你正在使用的主题的“style”文件夹内。
3,修改你正在使用主题的header.php文件,插入“”。
4,在想要调用图标字体的地方插入”“这种代码即可调用了。
5,图标的调用方法请参考下方主题使用者的教程。
备注:其实这样的使用方法并非是最优的选择,这只是普遍化的普通的引入和使用方法,其实还有一种引入和调用的方法才是我最建议开发者选择的,本文中暂且不提,以后再给大家说来,到时这里会直接加上超链接引导大家进入。
二,主题的使用者该如何调用主题中已引入的Font Awesome图标库
作为一款主题的使用者,如果你的主题中已经引入了Font Awesome图标库,那么这时你只需要直接调用即可!调用方法如下:
1,打开Font Awesome图标中文网,网址:http://www.fontawesome.com.cn/,并点击导航栏的“图标库”按钮,如下图:
2,进入图标库页面之后,找到你需要用到的图标样式并点击如下图:
3,点击具体的某个图标后,你即可进入图标具体代码页,点击复制代码并将其添加到你需要的位置即可,如下图:
4,图标已成功添加到你需要的位置,如果刷新页面没有显示出来,这时你可以“重新编译主题缓存”和清理浏览器缓存即可!
可能喜欢
-
超简单的ZBLOG导航高亮代码
超简单的ZBLOG导航高亮教程先在UL代码上加上相关ID,如下面代码:<ul class="nav-ul" id=...
zblog教程 2022-08-05 -
robots.txt文件怎么写我来教你
1、什么是robots.txt文件robots是站点与spider沟通的重要渠道,站点通过robots文件声明该网站中不想被搜索引擎收录的部分或者指定搜索引擎只...
zblog教程 2022-07-31 -
zblog新手建站安装详细教程
Z-Blog是什么?Z-BlogPHP是由Z-Blog社区提供的博客程序,一直致力于给国内用户提供优秀的博客写作体验。从2006年起发布第一版,至今已有11年的...
zblog教程 2022-07-22 -
记录和分享Zblog PHP文章调用相关文章的官方代码
我们知道如果能够在zblog文章调用文相关文章,无疑能够提升网站的吸引力,增加文章的访问量,要想实现调用的功能,我们可以通过官方提供的一组代码进行操作,代码如下...
zblog教程 2022-07-21 -
Windows IIS环境下实现ZBLOG PHP 全站301重定向
做网站做久了,有时候免不了要换网址换域名,为了保持网站的收录和权重排名,我们就必须要做全站的301重定向。下面,我们介绍一种办法,可以实现基于win2008下的...
zblog教程 2022-07-21 -
zblog如何做下拉导航?下拉导航菜单制作方法
下拉菜单这个东西很多朋友都觉的自己应该需要(这是句玩笑话...),本文呢就简单的讲下zblog是如何实现下拉导航菜单的。首先上代码,css部分是这样的:#nav...
zblog教程 2022-07-21