Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[For 1.8] [Tutorial] - Replace postbit on/offline images with FA icon (Simple way)(reposted)
#1
Information 
Replace postbit online/offline images with Fontawesome icons ** ( re-posted due to numerous user requests and complaints after I deleted my old tutorials. )

Most basic way is as follows:

For Font Awesome 4:

In headerinclude add:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Replace postbit_online with:

<a href="online.php" title="{$lang->postbit_status_online}"><i class="fa fa-check-circle online" alt="{$lang->postbit_status_online}"></i></a>

Replace postbit_offline with:

<i class="fa fa-times-circle offline" title="{$lang->postbit_status_offline}" alt="{$lang->postbit_status_offline}"></i>


For Font Awesome 5:

In headerinclude add:

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

Replace postbit_online with:

<a href="online.php" title="{$lang->postbit_status_online}"><i class="fas fa-check-circle online" alt="{$lang->postbit_status_online}"></i></a>

Replace postbit_offline with:

<i class="fas fa-times-circle offline" title="{$lang->postbit_status_offline}" alt="{$lang->postbit_status_offline}"></i>

You can then modify further by css for example this basic usage is pulling from existing offline and online class for coloring..., so you could replace those in the call with your custom classes and allow for positioning, coloring, and whatever else you so desire...
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)