[Pro Tip]: Add Icons to Reply, Mark Unread, Recieve Alert, etc buttons

Started by Mick., December 24, 2021, 09:16:06 AM

Previous topic - Next topic

Mick.



2.1 has a gazillion icons everywhere but they forgot to add nifty icons to Post buttons. The other day I saw a website that had a "Plus" icon next to their Reply button. I thought it was nice so I decided to add my own.

In this case, it's very simple. If you already use FontAwesome...

Open index.english.php and find:
$txt['reply'] = 'Reply';
Let's add the icon with color. Replace with:
$txt['reply'] = '<span style="color: #fa5f66;"><i class="fas fa-plus"></i></span> Reply';
Change the hex color #fa5f66; to suit your theme and if you want, do the same to the other buttons.

You cannot view this attachment.


fingermask

This Post Is Old but Gold for me at this time!

Thanks, I found this.

Bigguy

Is there default icons in SMF 2.1.x for alerts, messages and profile. ?? I thought I saw some pop up when I was playin with the upgrade I did.

Sesquipedalian

Quote from: Bigguy on February 15, 2022, 01:02:04 PMIs there default icons in SMF 2.1.x for alerts, messages and profile. ?? I thought I saw some pop up when I was playin with the upgrade I did.
There are. You just need to use the main_icons CSS class plus the appropriate CSS class for the specific icon you want. For example, to get the default icon for alerts, use the following:

<span class="main_icons alerts"></span>
I promise you nothing.

Sesqu... Sesqui... what?
Sesquipedalian, the best word in the English language.

Bigguy


Bigguy

I had to play a bit but I got it to do what I wanted, thank you again.


Diego Andrés

Well those icons are already there by default  :P
You just have to comment or delete the lines that hide them in bigger screens

I think it's this?
Code (index.css) Select
#pm_menu_top .main_icons,
#alerts_menu_top .main_icons {
display: none;
}

SMF Tricks - Free & Premium Responsive Themes for SMF.

Bigguy

Well, not sure if it's right but this is what I used. I also had to reposition the avatar as it was not inline with the other icons. I don't think the -1 in it is right, lol but hey it works:


#profile_menu_top > img.avatar {
 height: 18px;
 width: 18px;
 margin: -1px 5px 0 0;
 float: left;
}
#pm_menu_top .main_icons,
#alerts_menu_top .main_icons {
 display: inline-flex;
}

Bigguy


Advertisement: