[Code] Css chuyển toàn bộ bbcode sang font awesome

  • Giựt
    1. [Code] Css chuyển toàn bộ bbcode sang font awesome
    avatar MOD

    Demo






    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 ! Very Happy

    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">
    #codefm

Thông tin tác giả
avatar
MOD
Bài viết :
273
Points :
440
Like :
89
Punbb
Cẩn thận
Status :
Giựt đẹp trai
Xem lý lịch thành viên
Bài viết liên quan
    Đang tải dữ liệu

Permissions in this forum:
Bạn không có quyền trả lời bài viết