Add an icon next to Text/URL header logo

Started by Mick., October 04, 2021, 04:01:53 PM

Previous topic - Next topic

Mick.


For 2.1 theme series

If you notice, many websites have ditched the image logo for a simpler text look that use an svg format for icons to promote their brand.

Let's add a simple bit to the CSS file to show a decent icon to compliment the name of your brand/Forum name.

Open the theme's CSS file and add at the end...
h1.forumtitle a::before {
    font-family: "Font Awesome\ 5 Free";
    color: rgba(39,103,187,1);
    font-weight: 600;
    display: inline;
    margin-right: 10px;
    content: '\f52d';
}

1. Replace color with rgba or Hex style.
rgba(255, 255, 255, 1);Hex #000000;
2. Replace the icon by selecting your own at https://fontawesome.com/v5.15/icons?d=gallery&p=2
3. Copy the Unicode and replace the existing in the bit above.
    content: '\f52d';
If your 2.1 theme does not use FontAwesome icons, we need to call the js.
Open index.template.php and find:
    // load in any css from mods or themes so they can overwrite if wanted

Add after:

    loadCSSFile('https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css', array('external' => true));

Enjoy  8)

Antechinus

Pseudos FTW. :)

And if you don't want to load FA for anything else, you can also use standard web emojis instead. Or you can use a background image on the pseudo.

In fact, you could even use a background image and padding on the H1. That would also work.

Speed King

Applied and working on my forum, with 'sun' icon (f185) :)

Mick.

#3
Quote from: Speed King on October 05, 2021, 05:24:35 AMApplied and working on my forum, with 'sun' icon (f185) :)
Nice!  8)

I would suggest not showing an underline when hover..

h1.forumtitle a:hover {
text-decoration: none;
}

Advertisement: