如何最佳化 bbPress 論壇樣式美化程式碼，給帖子和版塊新增上小圖示？

2018 年 9 月 10 日

1,746 次閱讀

小新

程式碼技巧, 入門指南

給我們的薇曉朵技術論壇已經做了不少美化工作，所以就把不必要的給清楚掉了。留了個下面的效果：

實際應用效果如下面，是不是很可愛：

帖子列表頁：

當然其實圖示還是可以自定義的，我們論壇希望越簡單越好，就去掉了。

收藏前：

收藏後：

程式碼如下，不過需要你的主題能夠支援 FontAwesome 才可以：

/* 您可以在此加入您的 CSS 。 */  #bbpress-forums #favorite-toggle a:before { content:"\f08a"; margin-right:6px } #bbpress-forums #favorite-toggle .is-favorite a:before { content:"\f004" } #bbpress-forums .subscription-toggle:before { content:"\f09e"; margin-right:6px } #bbpress-forums .is-subscribed .subscription-toggle:before { content:"\f00d" }  .bbp-body a.bbp-forum-title:before,.bbp-body a.bbp-topic-permalink:before { position:absolute; left:0; top:0px; display:inline-block; width:25px; font-family:"FontAwesome"; content:"\f086" } .bbp-body .no-replies a.bbp-forum-title:before { content:"\f0e5" } .bbp-body .status-closed a.bbp-topic-permalink:before { content:"\f023" } .bbp-body a.bbp-forum-title,.bbp-body a.bbp-topic-permalink { position:relative; padding-left:25px } .bbp-body a.bbp-forum-title:before,.bbp-body a.bbp-topic-permalink:before,#bbpress-forums #bbp-single-user-details #bbp-user-navigation a:after,#bbpress-forums .subscription-toggle:before,#bbpress-forums #favorite-toggle a:before { font-family:"FontAwesome"; font-weight:normal; font-style:normal; letter-spacing:normal; text-rendering:auto; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale }

上面的程式碼是 css 新增到你主題自定義的 css 裡面儲存就有。

不過需要 FontAwesome 字型支援，如果你主題有有了支援 FontAwesome 的可以不用管，沒有的就在後臺安裝這個：