For 2.1 theme seriesIf 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)
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.
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;
}