How to easily remove menu icons?

Topic: How to easily remove menu icons? (Read 3779 times) previous topic - next topic

0 Members and 1 Guest are viewing this topic.

How to easily remove menu icons?

September 18, 2014, 04:54:30 am

Hey,

how to remove icons in menu without editing source file? Menu buttons with icons are little bit lower in line (you can see it even here in Be Social variant), so I can't style it properly in theme that I'm porting from other software.. :|

//edit:
index.template.php:

Code: (Find and remove) [Select]

', (!empty($button['data-icon']) ? 'data-icon="' . $button['data-icon'] . '" ' : ''), '

Re: How to easily remove menu icons?

Reply #1 – September 18, 2014, 11:37:14 am

The related css is in the variants index_{variant}.css.
The selector is:

Code: [Select]

[data-icon]:before {

and the relevant css is:

Code: [Select]

content: attr(data-icon);

though, if the problem is a bit of misalignment it may be better to fix that instead?

Re: How to easily remove menu icons?

Reply #2 – September 18, 2014, 11:46:03 am

I just moved icons to right side, tried to 'fix' it but I'm not that good with CSS :|

Re: How to easily remove menu icons?

Reply #3 – September 18, 2014, 12:17:07 pm

I'm not entirely sure, but try changing in the same selector

Code: [Select]

padding: 3px 3px 0;

to:

Code: [Select]

padding: 2px 3px 2px;

Re: How to easily remove menu icons?

Reply #4 – September 18, 2014, 12:29:11 pm

~~I didn't noticed any change. I was thinking... maybe there is some 'empty' code for data icon?~~

I'm idiot... It's not it, topic closed for now while I try to figure out what is really going on.

Re: How to easily remove menu icons?

Reply #5 – September 18, 2014, 12:57:23 pm

I think I got it now. I was looking at one thing and writing about another, problem is with Font Awesome icons in menu, you can see it in Be Social variant.

Open index_besocial.css:

Code: (Find) [Select]

}
@media screen and (max-width: 50em) {

Code: (Replace with) [Select]

	#menu_nav .listlevel1.no_subsections>a:before {
		font-family: "FontAwesome";
		font-size: 1.2em;
		content: "";
	}
}
@media screen and (max-width: 50em) {

Now in index.template.php:

Code: (Find) [Select]

', !empty($button['sub_buttons']) ? ' subsections" aria-haspopup="true"' : '"', '

Code: (Replace with) [Select]

', !empty($button['sub_buttons']) ? ' subsections" aria-haspopup="true"' : ' no_subsections"', '

Before:

After:

Maybe this could be added in 1.0.1?

Re: How to easily remove menu icons?

Reply #6 – September 18, 2014, 02:33:13 pm

AHA!
That misalignment!
You mentioned icons, so I thought you were talking about the icons displayed at small resolutions!

Okay, try adding to:

Code: [Select]

@media screen and (min-width: 50em) {
		#menu_nav .listlevel1.subsections>a:before {

Code: [Select]

float: left;

The change to the template should not be necessary.

Re: How to easily remove menu icons?

Reply #7 – September 18, 2014, 02:49:36 pm

hmm.. that does the trick too

Re: How to easily remove menu icons?

Reply #8 – September 18, 2014, 03:02:01 pm

emanuele hopes it doesn't break anything else...

Re: How to easily remove menu icons?

Reply #9 – September 18, 2014, 03:10:03 pm

I don't see any side effects

Re: How to easily remove menu icons?

Reply #10 – September 19, 2014, 04:08:02 am

There seems to be one issue with your solution - you can't change position of this icon from 'before' to 'after' button label.

Re: How to easily remove menu icons?

Reply #11 – September 19, 2014, 04:28:22 am

Try "float: right" instead of "float left"... I **think**.