Demo
![[Code] Css chuyển toàn bộ bbcode sang font awesome Bbcode10](https://i.servimg.com/u/f35/19/30/07/62/bbcode10.png)
![[Code] Css chuyển toàn bộ bbcode sang font awesome Bbcode11](https://i.servimg.com/u/f35/19/30/07/62/bbcode11.png)
Cách làm
Chú ý : Css dài , nếu bạn nào bị nó thông báo quá nhiều css thì mình không chịu trách nhiệm nhé !
Vào Css thêm :
Code:
/* Style cho bbcode */
.sceditor-container{border:2px solid #69C!important;border-radius:0!important}
.sceditor-container .sceditor-toolbar{background-color:#69C;border-color:#58B;border-radius:0}
.sceditor-container .sceditor-group{background:rgba(255,255,255,0.45);border-color:#58B;border-radius:0;padding:0}
.sceditor-container .sceditor-button{border-radius:0;padding:4px 6px;position:relative}
.sceditor-container .sceditor-button:hover{box-shadow:none;background-color:rgba(255,255,255,0.3)}
.sceditor-container .hover,.sceditor-container .sceditor-button.active,.sceditor-container .sceditor-button:active{box-shadow:none;background-color:rgba(255,255,255,0.6)}
.sceditor-container .sceditor-button.disabled{opacity:0.5}
/*BBcode awesome*/
.sceditor-container .sceditor-button div{background-image:none}
.sceditor-button:after,.sceditor-button:before{color:#555;font-size:14px;font-weight:normal;font-family:FontAwesome;text-align:center;position:absolute;top:0;left:0;right:0;bottom:0;line-height:28px;text-indent:0}
.sceditor-button-bold:after{content:"\f032"}
.sceditor-button-italic:after{content:"\f033"}
.sceditor-button-underline:after{content:"\f0cd"}
.sceditor-button-strike:after{content:"\f0cc"}
.sceditor-button-left:after{content:"\f036"}
.sceditor-button-center:after{content:"\f037"}
.sceditor-button-right:after{content:"\f038"}
.sceditor-button-justify:after{content:"\f039"}
.sceditor-button-bulletlist:after{content:"\f0ca"}
.sceditor-button-orderedlist:after{content:"\f0cb"}
.sceditor-button-horizontalrule:after{content:"\f068"}
.sceditor-button-quote:after{content:"\f10d"}
.sceditor-button-code:after{content:"\f121"}
.sceditor-button-faspoiler:after{content:"\f071"}
.sceditor-button-fahide:after{content:"\f070"}
.sceditor-button-table:after{content:"\f0ce"}
.sceditor-button-servimg:after{content:"\f093"}
.sceditor-button-image:after{content:"\f03e"}
.sceditor-button-link:after{content:"\f0c1"}
.sceditor-button-youtube:after{content:"\f16a"}
.sceditor-button-flash:before,.sceditor-button-dailymotion:before{content:"";background:#555;top:6px;left:6px;right:6px;bottom:6px}
.sceditor-button-dailymotion:after{content:"d";color:#FFF;font-weight:bold;font-family:"trebuchet ms",arial,verdana,sans-serif;left:3px;top:1px}
.sceditor-button-flash:after{content:"Æâ€
";color:#FFF;font-weight:bold;font-family:sans-serif;top:-1px}
.sceditor-button-headers:after{content:"\f1dc"}
.sceditor-button-size:after{content:"\f034"}
.sceditor-button-color:after{content:"\f1fb"}
.sceditor-button-font:after{content:"\f031"}
.sceditor-button-removeformat:before{content:"\f031"}
.sceditor-button-removeformat:after{content:"\f056";font-size:10px;left:auto;top:auto;right:5px;bottom:3px;line-height:normal}
.sceditor-button-more:after{content:"\f141"}
.sceditor-button-subscript:after{content:"\f12c"}
.sceditor-button-superscript:after{content:"\f12b"}
.sceditor-button-fascroll:after{content:"\f100"}
.sceditor-button-faupdown:after{content:"\f102"}
.sceditor-button-farand:after{content:"\f074"}
.sceditor-button-emoticon:after{content:"\f118"}
.sceditor-button-date:after{content:"\f271"}
.sceditor-button-time:after{content:"\f017"}
.sceditor-button-pastetext:after{content:"\f0ea"}
.sceditor-button-source:after{content:"\f0f6"}
Nguồn
http://themedesign.forumotion.com/
Theme Design
P/S : Forum phải được cài đặt font awesome !
Cụ thể cách cài đặt font awesome :
Cho đoạn code dưới đây vào trên </head> trong overall_header :
Code:
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
