闻名网

关注(zmtihome.com)闻名网

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

145°c | 2周前 ( 09-27 17:16 ) | 0 评论
zblogPHP站点集成Font Awesome图标字体使用教程摘要:

在很多响应式站点都喜欢使用图标字体,特别是在导航菜单使用得特别多,所以今天就跟大家说一说 zblog...

Σ( ° △ °|||)︴这篇文章最后更新于 2周前 ( 09-27 17:16 ) ,您需要注意相关的内容是否还可用。
总字数:1520

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

zblogPHP站点集成Font Awesome图标字体使用教程 免费资源 代码 图标 第1张图片

Font Awesome 图标字体介绍

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

  • 一个字库 675 个图标:仅一个 Font Awesome 字库,就包含了与网页相关的所有形象图标。

  • 无需依赖 JavaScript:Font Awesome 完全不依赖 JavaScript,因此无需担心兼容性。

  • 无限缩放:无论在任何尺寸下,可缩放的矢量图形都会为您呈现出完美的图标。

  • 如言语一般自由:Font Awesome 完全免费,哪怕是商业用途。请查看许可。

  • CSS 控制:只要 CSS 支持,无论颜色、大小、阴影或者其它任何效果,都可以轻易展现。

  • 高分屏完美呈现:Font Awesome 的矢量图标,将使您的网站在视网膜级的高分屏上大放异彩。

  • 完美兼容其它框架:尽管是为 Bootstrap 设计,但 Font Awesome 同样能与其它框架完美协同运作。

  • 可用于桌面系统:用于桌面系统,或需要一套完整的矢量图,请查看备忘。

  • 可适配于屏幕阅读器:与其它字体不同,Font Awesome 不会影响屏幕阅读器正常工作

zblogPHP站点集成Font Awesome图标字体使用教程 免费资源 代码 图标 第2张图片

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"/>

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

zblogPHP站点集成Font Awesome图标字体使用教程 免费资源 代码 图标 第3张图片

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

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

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

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

zblogPHP站点集成Font Awesome图标字体使用教程 免费资源 代码 图标 第4张图片

喜欢的朋友赶紧去试一试吧!

文章版权及转载声明:

作者:姚兵
本文地址:http://zmtihome.com/baike/post/485.html
版权声明:本站文章均来自投稿、转载、原创,与闻名网观点无关,希望读者明辨是非,谨防上当受骗!版权在文章结尾处。 闻名网(微信/QQ号:215816800),转载请保留出处和链接!


必填

选填

选填

◎已有 0 人评论,145人围观      请发表您的观点。