如何優化 bbPress 論壇樣式美化代碼,給帖子和版塊添加上小圖標?

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

實際應用效果如下面,是不是很可愛:

帖子列表頁:

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

收藏前:

收藏後:

代碼如下,不過需要你的主題能夠支持 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 的可以不用管,沒有的就在後台安裝這個:

Better Font Awesome 更好的圖標字體

原帖來自: https://bbs.weixiaoduo.com/topic/22260

有疑問?需要幫助請到論壇開貼告知。

文章沒看懂?代碼不會用?需要幫助您可以去論壇提問自助服務台

作者小新

大象、大象 ,你的鼻子怎麼那麼長 ,媽媽說鼻子長才是漂亮 ......