欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

仿盧松松2018年模板菜單前加Font Awesome圖標(biāo)字體方法

老白7年前2084瀏覽2評論

前幾天盧松松模板又進行了部分更新,時間充裕,索性就仿了下來。

說起這個模板,當(dāng)時大改版的時候可是被不少用戶罵的不行,丑的一筆,但架不住盧松松文章內(nèi)容多,賺錢的小點子一堆,覺得不好看的模板,看著看著也都習(xí)慣了,最終被接受,還培養(yǎng)了不少模板粉!

PS:其實這個模板好看說不上,但足夠?qū)嵱茫貏e是盧松松來用,剛剛好做內(nèi)容!

screenshot.png

這個模板整體沒什么特別的,與其它zblogPHP主題并沒有太大差異和難度,就是左菜單帶上圖標(biāo)會好看很多,本文主要也是講下如何在模板中加入圖標(biāo):


首先,我仿這個模板,用的是“Font Awesome”家的圖標(biāo)字體,豐富、簡單、好處多多!


使用方法:

舉例:

搜索圖標(biāo):搜索圖標(biāo).png

調(diào)用代碼:<i class="fa fa-search"></i>

詳細(xì)說明:上述代碼中,紅色的search是可以改變的,不同圖標(biāo)有不同的英文字母。如果把紅色的search改為qq會發(fā)生什么呢?

<i class="fa fa-qq"></i>此時這段代碼代表的圖標(biāo)是:qq圖標(biāo).png<i class="fa fa-weixin"></i>此時這段代碼代表的圖標(biāo)是:微信圖標(biāo).png

簡單吧!


那么對應(yīng)關(guān)系哪里找呢? 當(dāng)然是去 “Font Awesome”找了,國內(nèi)網(wǎng)址 -> http://fontawesome.dashgame.com/

fontawesome.png

看到了嗎?內(nèi)有大量圖標(biāo),圖標(biāo)右側(cè)對應(yīng)的是需要改變的英文,需要使用圖標(biāo),只需要改變<i class="fa fa-search"></i>中的紅色字母部分。


以下只針對盧松松模板說明:

具體到仿的盧松松模板,菜單應(yīng)該如何加圖標(biāo)呢?

第一步:

后臺 - 主題配置 - 導(dǎo)航菜單中設(shè)置好菜單,先不要管圖標(biāo)的問題,先設(shè)置好菜單。

第二部:

前臺菜單滿意后,復(fù)制網(wǎng)頁中的菜單代碼,粘貼到 主題配置 - 導(dǎo)航菜單 - DIY導(dǎo)航菜單代碼中,

然后只選擇QQ截圖20180112174439.png,保存,此時利用DIY代碼一樣可以實現(xiàn)菜單效果。

第三步:

為菜單加圖標(biāo),比如DIY代碼中,菜單為:<li><a href="#">天下美食</a></li>,如果要為天下美食前加入搜索圖標(biāo),那么就應(yīng)該是:

<li><a href="#"><i class="fa fa-search"></i>天下美食</a></li> 紅色部分為添加的圖標(biāo)

如果在天下美食前加入qq圖標(biāo),那就是:<li><a href="#"><i class="fa fa-qq"></i>天下美食</a></li>

保存!

第四步:完!


寫完本篇才發(fā)現(xiàn),以前竟然寫過一篇類似的使用fw字體方法的文章,汗!


Font Awesome 圖標(biāo)字體庫最簡單教程 - 使用方法!