MyBB Community Forums

Global.Css Add

.posticons-icon {
    display: inline-block;
    color: #f1f1f1;
    text-align: center;
}

.posticons-icon i {
    display: inline-block;
    line-height: 10px;
    font-size:15px;
    font-family:"Font Awesome 5 Free";
    font-weight: 900;
    -webkit-border-top-left-radius: 4px;
    border-top-left-radius: 4px;
}

.posticons-icon i { animation: blowUp .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;}

@keyframes blowUp {
 0% {
   transform:scale(0);
 }
 100% {
   transform:scale(1);
 }
}

.posticons-icon_1 i:before {
    content: "\f188";
    color: green;
} 

.posticons-icon_2 i:before {
    content: "\f06a";
    color: #a03b39;
}

.posticons-icon_3 i:before {
    content: "\f059";
    color: #323c8c;
}

.posticons-icon_4 i:before {
    content: "\f118";
    color: #3898a5
}

.posticons-icon_5 i:before {
    content: "\f57a";
    color: #8ca538
}

.posticons-icon_6 i:before {
    content: "\f598";
    color: #61ad10;
}

.posticons-icon_7 i:before {
    content: "\f0f3";
    color: #fddc00
}

.posticons-icon_8 i:before {
    content: "\f58b";
    color: #e44b00
}

.posticons-icon_9 i:before {
    content: "\f557";
    color: #18a5a1;
}

.posticons-icon_10 i:before {
    content: "\f004";
    color: #d17877;
}

.posticons-icon_11 i:before {
    content: "\f05a";
    color: #3c649e;
} 

.posticons-icon_12 i:before {
    content: "\f0eb";
    color: #dbbc20;
} 

.posticons-icon_13 i:before {
    content: "\f001";
    color: #207adb;
}

.posticons-icon_14 i:before {
    content: "\f03e";
    color: #328c87;
} 

.posticons-icon_15 i:before {
    content: "\f743";
    color: #828cd6;
}

.posticons-icon_16 i:before {
    content: "\f5c2";
    color: #38a553;
}

.posticons-icon_17 i:before {
    content: "\f005";
    color: #ccc47c;
} 

.posticons-icon_18 i:before {
    content: "\f165";
    color: #65c6b9;
} 

.posticons-icon_19 i:before {
    content: "\f164";
    color: #658fc6;
} 

.posticons-icon_20 i:before {
    content: "\f03d";
    color: #e886dc;
} 

postbit template - postbit_icon Find - Delete All Add These

<div class="posticons-icon posticons-icon_{$icon['iid']}"title="{$icon['name']}" style="vertical-align: middle;" />&nbsp;
<i class="fas fa-"></i></div>

header symbols template - posticons_icon - Delete All Add These

<label class="posticons_label"><input type="radio" name="icon" value="{$dbicon['iid']}"{$checked} /> 
<div class="posticons-icon posticons-icon_{$dbicon['iid']}"title="{$dbicon['name']}" ><i class="fas fa-"></i></div> 
</label>

forumdisplay_thread_icon replace with 

<div class="posticons-icon posticons-icon_{$icon['iid']}"title="{$icon['name']}" style=vertical-align: middle;" />
<i class="fas fa-"></i></div>

search_results_icon replace with 

<div class="posticons-icon posticons-icon_{$posticon['iid']}" title="{$posticon['name']}"style="vertical-align: middle;" />
<i class="fas fa-"></i></div>

private_messagebit_icon

<div class="posticons-icon posticons-icon_{$icon['iid']}" title="{$icon['name']}"style="vertical-align: middle;" />
<i class="fas fa-"></i></div>

usercp_subscriptions_thread_icon

<div class="posticons-icon posticons-icon_{$icon['iid']}"title="{$icon['name']}" style="vertical-align: middle;" />
<i class="fas fa-"></i></div>

portal_announcement_icon

<div class="posticons-icon posticons-icon_{$icon['iid']}"title="{$icon['name']}" style="vertical-align: middle;" />
<i class="fas fa-"></i></div>

Headerinclude Add

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">

View
https://imgur.com/a/47lGnEw

For A Better Mybb


Topic Updated(12.11.2018)

Nice one.

PS: I would suggest that you edit your thread title to something like "Font Awesome 5 Posticons". So that people can find it when they search for posticons in google.

seems awesome , thanks in advance

working but 

it is Post icon templates not header symbols template 

and for forum display you need to edit tempalte 

forumdisplay_thread_icon replace with 

<div class="posticons-icon posticons-icon_{$icon['iid']}"title="{$icon['name']}" style="vertical-align: middle;" />&nbsp;
<i class="fas fa-"></i></div>

kinldy update first post 

great tutotial indeed

thank you

More screenshots please???

Thanks Topic Updated

Unfortunately icons are misaligned

https://imgur.com/Oah08LW

my board url: https://www.carcassonneforum.cz/forum-6.html

EDIT: OK, I fixed this issue, I just removed ' ' and it fixed my issue. Another thing - is there any way to make background-color: #fff for all FA icons? Because now their color is same as background - visibility is not good - so for example make "i" white

https://imgur.com/DclQoKB

EDIT2: Posticons are not replaced in Private messages - can you provide a fix?

(2018-11-10, 08:45 AM)Eldenroot Wrote: [ -> ]Unfortunately icons are misaligned

https://imgur.com/Oah08LW

my board url: https://www.carcassonneforum.cz/forum-6.html

EDIT: OK, I fixed this issue, I just removed ' ' and it fixed my issue. Another thing - is there any way to make background-color: #fff for all FA icons? Because now their color is same as background - visibility is not good

https://imgur.com/DclQoKB

Sorry, follow the step below

forumdisplay_thread_icon replace with 

<div class="posticons-icon posticons-icon_{$icon['iid']}"title="{$icon['name']}" style=margin-top:-20px;vertical-align: middle;" />&nbsp;
<i class="fas fa-"></i></div>

And for the private message page? Icons need to be replaced too

@eldenroot you mean that only icon of envelope ?