请在Chrome、Firefox等现代浏览器浏览本站。记住我们的域名:tmy123.com   加入本站QQ群,大家一起HIGH:点击加入QQ群

使用Font Awesome字体给网站导航栏添加个性图标

WP教程 Jophen 俞 2805℃ 已收录 15评论

nav 1

看到本站导航栏的图标了么?想不想也弄一个?其实这个很好实现,只需要Font Awesome就可以。

一、首先下载Font Awesome字体和css

Font Awesome
解压Font Awesome文件夹,打开css/font-awesome.min.css

Font Awesome-1 2 Font Awesome-2 3

font-awesome.min.css里的所有代码添加到自己主题的样式表style.css中。(或者可以单独引用)。

将fonts文件夹放到站点根目录下(一般是public_html或者wwwroot,web)。

这样font-awesome的配置工作就完成了,在需要的地方加上引用的代码即可,这里以导航菜单为例。首先查看下font-awesome所有图标。
font-awesome所有图标      打开速度略慢,建议挂vpn查看

如果看中了你喜欢的图标,比如这个music图标,点击进去。

music 4

 

看下方图片框住的区域,就是调用的代码了!

code 5

 

打开WordPress后台, 外观-菜单,将代码加到相应的标题钱保存即可。

code-2 6

 

本站文章如未注明,均为原创丨本网站采用BY-NC-SA协议进行授权,转载请注明转自:https://tmy123.com/Font-Awesome.html
喜欢 (15)
发表我的评论
取消评论
表情 代码 加粗 链接 私信 删除线 签到

Hi,请填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(15)条精彩评论。
  1. 其实在需要调用图标的地方直接引用CSS文件即可,不需要下载到本地。CSS引用地址:
    简单世界2015年-09月-16日发表回复| Internet Explorer 11.0| Windows 10
  2. 不错,整个网站的风格很多彩。。让我很迷失。
    美Win网2015年-08月-08日发表回复| Google Chrome 44.0.2403.130| Windows 10 x64
  3. 很好用的说!
    美Win网2015年-06月-17日发表回复| Google Chrome 43.0.2357.124| Windows 8.1 x64
    • 必须好用啊
      Jophen 俞2015年-06月-17日发表回复| Google Chrome 43.0.2357.81| Windows 8.1 x64
  4. scss less font-awesome.css都没用吗?
    xrdfh2015年-04月-01日发表回复| Google Chrome 31.0.1650.63| Windows 7 x64
    • 没用过
      Jophen 俞2015年-04月-01日发表回复| Google Chrome 39.0.2171.99| Windows 7 x64
  5. 用阿里巴巴的矢量图标啊,这个简单
    Amateurs_ds2015年-02月-10日发表回复| Safari 534.30| Android 4.4.4
    • 这个我还不知道呢,我用的是字体图标
      Jophen 俞2015年-02月-10日发表回复| Google Chrome 38.0.2125.122| Windows 7
      • 😮 没邮件通知评论么,我还不知道你已经回复了啊
        Amateurs_ds2015年-02月-12日发表| Safari 534.30| Android 4.4.4
  6. 其实这个可以用WP插件完成的 :mrgreen: null
    钊哥博客2015年-02月-10日发表回复| Google Chrome 31.0.1650.63| Windows 8 x64
  7. 网站改版了 欢迎评论测试
    易淘金论坛2015年-02月-08日发表回复| Google Chrome 38.0.2125.122| Windows 7 x64
    • 额,改成论坛了 😕
      Jophen 俞2015年-02月-09日发表回复| Google Chrome 38.0.2125.122| Windows 7
  8. 技术宅,就是牛
    分钱榜2015年-02月-08日发表回复| Google Chrome 31.0.1650.63| Windows XP
    • 略懂略懂 🙁
      Jophen 俞2015年-02月-08日发表回复| Google Chrome 38.0.2125.122| Windows 7
  9. 很不错的分享,谢谢!
    学史博客2015年-02月-08日发表回复| unknow| Iphone 8_1_3 like Mac OS X