Simple Icon Font Posbit Buttons

[Hyper]

First we need to load Font Awesome, so navigate to your Ungrouped Templates > headerinclude template, and find this:

Kod: Tümünü Seç Tümünü Kopyala

{$stylesheets}

Add this after:

Kod: Tümünü Seç Tümünü Kopyala

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Then navigate to your global.css file and find this:

Kod: Tümünü Seç Tümünü Kopyala

.postbit_buttons > a:link,
.postbit_buttons > a:hover,
.postbit_buttons > a:visited,
.postbit_buttons > a:active {
 display: inline-block;
 padding: 2px 5px;
 margin: 2px;
 font-size: 11px;
 background: #eee url(images/buttons_bg.png) repeat-x;
 border: 1px solid #ccc;
 color: #555;
}

.postbit_buttons > a:hover {
 border-color: #bbb;
}

.postbit_buttons a span {
 padding-left: 20px;
 display: inline-block;
 height: 16px;
 background-image: url(images/buttons_sprite.png);
 background-repeat: no-repeat;
}

.postbit_buttons a.postbit_find span {
 background-position: 0 0;
}

.postbit_buttons a.postbit_reputation_add span {
 background-position: 0 -20px;
}

.postbit_buttons a.postbit_email span {
 background-position: 0 -40px;
}

.postbit_buttons a.postbit_website span {
 background-position: 0 -60px;
}

.postbit_buttons a.postbit_pm span {
 background-position: 0 -80px;
}

.postbit_buttons a.postbit_quote span {
 background-position: 0 -100px;
}

.postbit_buttons a.postbit_multiquote span {
 background-position: 0 -120px;
}

.postbit_buttons a.postbit_multiquote_on span {
 background-position: 0 -140px;
}

.postbit_buttons a.postbit_edit span {
 background-position: 0 -160px;
}

.postbit_buttons a.postbit_qdelete span {
 background-position: 0 -180px;
}

.postbit_buttons a.postbit_qrestore span {
 background-position: 0 -200px;
}

.postbit_buttons a.postbit_report span {
 background-position: 0 -220px;
}

.postbit_buttons a.postbit_warn span {
 background-position: 0 -240px;
}

.postbit_buttons a.postbit_purgespammer span {
 background-position: 0 -540px;
}

.postbit_buttons a.postbit_reply_pm span {
 background-position: 0 -260px;
}

.postbit_buttons a.postbit_reply_all span {
 background-position: 0 -280px;
}

.postbit_buttons a.postbit_forward_pm span {
 background-position: 0 -300px;
}

.postbit_buttons a.postbit_delete_pm span {
 background-position: 0 -320px;
}

And replace it with:

Kod: Tümünü Seç Tümünü Kopyala

.postbit_buttons > a:link,
.postbit_buttons > a:hover,
.postbit_buttons > a:visited,
.postbit_buttons > a:active {
 display: inline-block;
 padding: 2px 5px;
 margin: 2px;
 font-size: 11px;
 background: url("images/buttons_bg.png") repeat-x scroll 0% 0% #EEE;
    border: 1px solid #CCC;
 color: #555;
}

.postbit_buttons > a:hover {
 border-color: #bbb;
}

.postbit_buttons a span:before {
    content: "";
    display: inline-block;
    font-family: FontAwesome;
    font-weight: normal;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 5px;
    font-size: 12px;
}

.postbit_buttons a.postbit_find span:before {
 content: "\f002";
}

.postbit_buttons a.postbit_reputation_add span:before {
 content: "\f067";
}

.postbit_buttons a.postbit_email span:before {
 content: "\f0e0";
}

.postbit_buttons a.postbit_website span:before {
 content: "\f0ac";
}

.postbit_buttons a.postbit_pm span:before {
 content: "\f199";
}

.postbit_buttons a.postbit_quote span:before {
 content: "\f10e";
}

.postbit_buttons a.postbit_multiquote span:before {
 content: "\f055";
}

.postbit_buttons a.postbit_multiquote_on span:before {
 content: "\f056";
    color: #DB1304;
}

.postbit_buttons a.postbit_edit span:before {
 content: "\f044";
}

.postbit_buttons a.postbit_qdelete span:before {
 content: "\f00d";
}

.postbit_buttons a.postbit_qrestore span:before {
 content: "\f067";
}

.postbit_buttons a.postbit_report span:before {
 content: "\f0a1";
}

.postbit_buttons a.postbit_warn span:before {
 content: "\f0e3";
}

.postbit_buttons a.postbit_purgespammer span:before {
 content: "\f071";
}

.postbit_buttons a.postbit_reply_pm span:before {
 content: "\f112";
}

.postbit_buttons a.postbit_reply_all span:before {
 content: "\f122";
}

.postbit_buttons a.postbit_forward_pm span:before {
 content: "\f064";
}

.postbit_buttons a.postbit_delete_pm span:before {
 content: "\f00d";
}

And that easy all your postbit buttons should now use Font Awesome. ^.^

   

Autor: Eric J.

[EmreKRMN]

Yazılar neden ingilizce? Konu link arşivlendi.

[Blume]

Adam ingiliz mi

[#Captain]

Kategoriyi okumuyorsunuz galiba?

'English Support Forum' kategorisinde anlatımlı konu açılmış, yani İngilizce..