zblogPHP站点集成使用Font Awesome图标字体教程

 2017-05-17 07:35:21  142 人阅读  30 条评论

投放广告联系   诚邀合作伙伴   赞助我们   公告栏   赞助光荣榜

现在很多响应式站点都喜欢使用图标字体,特别是在导航菜单使用得特别多,所以今天就跟大家说一说 zblogPHP 站点如何使用 Font Awesome 图标字体(PS:WordPress 站点使用更简单,可以直接安装插件 Font Awesome 4 Menus,或者根据本文的方法直接集成到主题中)。

zblogPHP站点集成使用Font Awesome图标字体教程 ZBlog 第1张

Font Awesome 图标字体介绍

Font Awesome 为您提供可缩放的矢量图标,您可以使用 CSS 所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。

  • 一个字库 675 个图标仅一个 Font Awesome 字库,就包含了与网页相关的所有形象图标。
  • 无需依赖 JavaScriptFont Awesome 完全不依赖 JavaScript,因此无需担心兼容性。
  • 无限缩放无论在任何尺寸下,可缩放的矢量图形都会为您呈现出完美的图标。
  • 如言语一般自由Font Awesome 完全免费,哪怕是商业用途。请查看许可。
  • CSS 控制只要 CSS 支持,无论颜色、大小、阴影或者其它任何效果,都可以轻易展现。
  • 高分屏完美呈现Font Awesome 的矢量图标,将使您的网站在视网膜级的高分屏上大放异彩。
  • 完美兼容其它框架尽管是为 Bootstrap 设计,但 Font Awesome 同样能与其它框架完美协同运作。
  • 可用于桌面系统用于桌面系统,或需要一套完整的矢量图,请查看备忘。
  • 可适配于屏幕阅读器与其它字体不同,Font Awesome 不会影响屏幕阅读器正常工作。

zblogPHP 站点集成 Font Awesome 图标字体

1、到官网去下载最新版 Font Awesome,将下载所得的 font-awesome-4.7.0.zip 压缩包解压后,将其中的 fonts 和 css 两个文件夹上传到我们正在使用的主题的“style”文件夹内。PS:其实也可以将两个文件夹的内容合在一起,其中 css 文件夹的 font-awesome.css 和 font-awesome.min.css 保留其中一个即可。

2、打开正在使用的主题\template\php文件,在适当位置(比如在引入主题 style.css 文件下方)插入以下代码:

  1. <link rel="stylesheet" rev="stylesheet" href="{$host}zb_users/theme/{$theme}/style/css/font-awesome.min.css" type="text/css" media="all"/>

添加代码完成后的代码见下图所示:

3、理论上,图标字体可以用在网站的任意位置,只需要用 i 标签加 class 来添加即可。比如我要加入微信图标,我只要在需要显示的位置添加如下标签即可:

  1. <i class="fa fa-weixin"></i>

而我们想要更多的图标,就需要到官方的图标库里面去查找,找到合适的图标后,点击打开即可得到相应的标签 class 了。

4、使用了图标字体的导航菜单效果图

zblogPHP站点集成使用Font Awesome图标字体教程 ZBlog 第3张

WordPress 方面

其实 WordPress 站点集成 Font Awesome 图标字体的方法跟 zblogPHP 是一样的,只是第二步修改 header.php 文件时的代码中的路径不一样而已。

如果文章对你有帮助,请赞赏支持boke112导航发展!

本文地址:http://boke112.com/3950.html
文章标签: ,   ,  
关注我们:请关注一下我们的微信公众号:扫描二维码,公众号:aiboke112
版权声明:本文为原创文章,版权归  所有,欢迎分享本文,转载请保留出处!
WordPress/zblogPHP免费响应式博客主题Blogs

 发表评论


  1. 携企网络科技有限公司
    携企网络科技有限公司 【小白】 @回复

    使用这样的css图像比图片文件小很多,建议使用!!

  2. 捷闪站长网
    捷闪站长网 【书童】 @回复

    不想折腾的博主可以在应用中心搜索FontsAwesome插件,直接安装即可使用

    • 懿古今
      懿古今【村长】2017-08-09 22:54  回复

      @捷闪站长网这个教程是针对zblog主题开发者,可以集成到主题中的。根据WordPress经验,尽量少用插件。

  3. Koolight
    Koolight 【尚书】 @回复

    Font Awesome图标真是个好东西,矢量,不受任何影响!

  4. 夏天烤洋芋
    夏天烤洋芋 【进士】 @回复

    懒得折腾了。

  5. 爱玩手机网
    爱玩手机网 【小白】 @回复

    的确 图标 字体一加网站好看多了 [嘻嘻] [嘻嘻]

  6. 小萝博客
    小萝博客 【状元】 @回复

    折腾精神好足啊

  7. 钱探子
    钱探子 【举人】 @回复

    Iconfont字体也不错的,内容比较丰富

  8. 励志语录
    励志语录 【进士】 @回复

    厉害了,看看

  9. Mr.Li
    Mr.Li 【举人】 @回复

    感觉zblog没有wp那么好折腾。
    虽然我现在忽然发现typecho其实更好用一点。

    • boke112导航
      boke112导航【村长】2017-05-18 08:48  回复

      @Mr.LiWordPress教程比较多,所以折腾起来比较容易,zblog教程实在是太少了,不利于折腾

  10. 彩票自助机
    彩票自助机 【进士】 @回复

    还是字体多了选择起来好,看着输入很多

  11. 演绎法
    演绎法 【进士】 @回复

    技术类的自动忽略

  12. 购物返利
    购物返利 【小白】 @回复

    不错,看来购物网站也要有类似功能了

  13. 码农BTS
    码农BTS 【状元】 @回复

    前段时间整了个服务器,准备试试zblog

  14. 聚赚园
    聚赚园 【秀才】 @回复

    学习了不错,

  15. 明月登楼
    明月登楼 【王爷】 @回复

    不错,学习了!

  16. 生活啊
    生活啊 【小白】 @回复

    现在Zblog都有PHP了。

  17. 金榜台博客
    金榜台博客 【状元】 @回复

    很不错的教程

  18. benen005
    benen005 【进士】 @回复

    确实不错

  19. 爱时尚
    爱时尚 【尚书】 @回复

    Font Awesome图标太多了,不知道选 哪个

  20. 企业战略
    企业战略 【举人】 @回复

    在不影响优化的前提下,能添加图标是不错的选择

  21. 靠谱学生兼职网
    靠谱学生兼职网 【尚书】 @回复

    站长辛苦了,教程很实用。

  22. 闲鱼
    闲鱼 【进士】 @回复

    添加图标有时候确实好看