How our logo is done. Bonus - FontAwesome

From our point of view, or logo is the most creative part done on the overall forum adding to it, the Titles.
Other than changing the overall_header in the most part of it cleaning it up of excesive codes that weren't good for us, we removed the image as well, and replaced it with a simple icon + 2 texts.

The overall logo, which is "Better" can't be changed directly from the forum, but the Patch Notes from below can. Without further talk, here is the simple code that we done for the header

Code:

<div id="logostrip" class="clearfix">
 <a href="{U_INDEX}" id="logo" title="{L_INDEX}"><div class="forumsname"><!-- BEGIN switch_h1 -->
                                                  <div id="mtitle"><i id="logoicon" class="fas fa-feather-alt"></i><h1>Better</h1></div>
 <!-- END switch_h1 -->
 <!-- BEGIN switch_desc -->
 <p id="sdesc">{switch_desc.SITE_DESCRIPTION}</p>
 <!-- END switch_desc -->
  </div> </a>

To add the icon, you will need a FontAwesome script to be added to your forum. We'd recommend it to be sent to overall_header, since it come on top of every page that your forum have. You will need a kit from FontAwesome which is sent on your email but I think that ours can be used as well.

Code:

<script src="https://kit.fontawesome.com/7b12b95764.js" crossorigin="anonymous"></script>

There is no need to talk about the text, only the icon is important from there because it has a small twist to it. Here is the code

Code:

#logoicon{
    float: left;
    font-size: 50px;
  margin-right:5px;
  color:white;
}

#logo:hover #logoicon{
  color:#9d31ab!important;
  transition:1s;
}

We use #logo:hover which mean when you put your cursor over the #logo section the #logoicon will react to it by changing the color to what it right there. If you feel like you want the whole CSS that we've done to it, there will be a hidden code. You just have to reply to this topic to see it.
We'd like not to flood the topic with codes that might not interest our people


Best regards,
Robert