前幾天盧松松模板又進行了部分更新,時間充裕,索性就仿了下來。
說起這個模板,當(dāng)時大改版的時候可是被不少用戶罵的不行,丑的一筆,但架不住盧松松文章內(nèi)容多,賺錢的小點子一堆,覺得不好看的模板,看著看著也都習(xí)慣了,最終被接受,還培養(yǎng)了不少模板粉!
PS:其實這個模板好看說不上,但足夠?qū)嵱茫貏e是盧松松來用,剛剛好做內(nèi)容!
這個模板整體沒什么特別的,與其它zblogPHP主題并沒有太大差異和難度,就是左菜單帶上圖標(biāo)會好看很多,本文主要也是講下如何在模板中加入圖標(biāo):
首先,我仿這個模板,用的是“Font Awesome”家的圖標(biāo)字體,豐富、簡單、好處多多!
使用方法:
舉例:
搜索圖標(biāo):
調(diào)用代碼:<i class="fa fa-search"></i>
詳細(xì)說明:上述代碼中,紅色的search是可以改變的,不同圖標(biāo)有不同的英文字母。如果把紅色的search改為qq會發(fā)生什么呢?
<i class="fa fa-qq"></i>此時這段代碼代表的圖標(biāo)是:<i class="fa fa-weixin"></i>此時這段代碼代表的圖標(biāo)是:
簡單吧!
那么對應(yīng)關(guān)系哪里找呢? 當(dāng)然是去 “Font Awesome”找了,國內(nèi)網(wǎng)址 -> http://fontawesome.dashgame.com/
看到了嗎?內(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)航菜單代碼中,
然后只選擇,保存,此時利用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字體方法的文章,汗!