[How To?] Handling several versions of fontawesome?

[Miraimaher]

Hello, I seem to have a problem using fontawesome on my forum, I know how to use it but the problem is regarding different versions, the theme im using has fontawesome v4 and works fine but i changed some of the other icons to fontawesome and I had to use v5 of fontawesome but it made the loading of my forum a little slower, I removed one from the headerinclude and the loading time sped up, my question is.. is there a proper way of handling more than one version of fontawesome? preferably without a plugin? 

Thanks!

[Ashley1]

Nobody is going to recommend running multiple versions of fontawesome, because they have become "fat" files.

Just link to one version of Fontawesome - V5 since that's latest. Do this after updating your v4 icons.

[Miraimaher]

I tried that but on mobile it seems the fontawesome that are used for the postbit icons dont load, only see X's instead of the icon, any way to fix those? Thanks!

[Ashley1]

Post the code where the fontawesome is.

[Miraimaher]

My headerinclude now has this code they gave me from the fontawesome website

<script src="https://kit.fontawesome.com/0057d1bf13.js"></script>

My Postbit templates I think all are the default code from the theme im using, the only think I changed was removing the text from the button, cause i wanted it to only have the icon, here are my templates

postbit_multiquote:

<a href="javascript:void(0)" onclick="Thread.multiQuote({$post['pid']}); return false;" style="display: none;" id="multiquote_link_{$post['pid']}" title="{$lang->postbit_multiquote}" class="postbit_multiquote postbit_mirage"><span id="multiquote_{$post['pid']}"></span></a>
<script type="text/javascript">
//<!--
	$('#multiquote_link_{$post['pid']}').css("display", "");
// -->
</script>

postbit_quote:

<a href="newreply.php?tid={$tid}&amp;replyto={$post['pid']}" title="{$lang->postbit_quote}" class="postbit_quote postbit_mirage"><span></span></a>

postbit_rep_button:

<a href="javascript:void(0)" onclick="MyBB.reputation({$post['uid']},{$post['pid']}); return false;" title="{$lang->postbit_reputation_add}" class="postbit_reputation_add"><span></span></a>

postbit_report:

<a href="javascript:void(0)" onclick="Report.reportPost({$post['pid']}); return false;" title="{$lang->postbit_report}" class="postbit_report"><span></span></a>

postbit_warn:

<a href="warnings.php?action=warn&amp;uid={$post['uid']}&amp;pid={$post['pid']}" title="{$lang->postbit_warn}" class="postbit_warn"><span></span></a>

postbit_www:

<a href="{$post['website']}" target="_blank" rel="noopener" title="{$lang->postbit_website}" class="postbit_website"><span></span></a>

postbit_find:

<a href="search.php?action=finduser&amp;uid={$post['uid']}" title="{$lang->postbit_find}" class="postbit_find"><span></span></a>

postbit_edit:

<a href="editpost.php?pid={$post['pid']}" id="edit_post_{$post['pid']}" title="{$lang->postbit_edit}" class="postbit_edit postbit_mirage"><span></span></a>

And heres the parts of the Global.css where I found fontawesome added..

.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: 2px;
   margin-left: 2px;
   margin-top: 1px;
   margin-bottom: 1px;
   font-size: 13px;
}

.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";
}

I even tried adding a new css that i named fontawesome.css and list the fontawesome.css that comes from the fontawesome download but it didnt fix it

[Ashley1]

This is the fontawesome reference:
https://fontawesome.com/how-to-use/on-th...o-elements

With FA5, you have to put the font family, and font weight, otherwise they don't show.

So you can try changing this

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

to this:

.postbit_buttons a.postbit_find span:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f002";
}

[Miraimaher]

Thanks, Ashley1, it worked, I just needed to change the <script src="https://kit.fontawesome.com/0057d1bf13.js"></script> for <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css"> and change some icons that werent working on v5 but it seems everything is working on mobile too

btw, do you know where i can find a tutorial on how to add buttons to the simple ckeditor? i wanted to add an imgur, and spoiler button but couldnt find info for that editor