Skip to main content ↑ ↓
How to easily remove menu icons? Started by Adrek · · Read 7120 times 0 Members and 1 Guest are viewing this topic. previous topic - next topic

How to easily remove menu icons?

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'] . '" ' : ''), '

::)
Last Edit: September 18, 2014, 07:02:57 am by phantom

Re: How to easily remove menu icons?

Reply #1 –

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?
Bugs creator.
Features destroyer.
Template killer.

Re: How to easily remove menu icons?

Reply #2 –

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 –

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;
Bugs creator.
Features destroyer.
Template killer.

Re: How to easily remove menu icons?

Reply #4 –

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.  :-[
Last Edit: September 18, 2014, 12:42:47 pm by phantom
 

Re: How to easily remove menu icons?

Reply #5 –

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?
Last Edit: September 18, 2014, 01:04:14 pm by phantom

Re: How to easily remove menu icons?

Reply #6 –

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 {
a:
Code: [Select]
float: left;

The change to the template should not be necessary. ;)
Bugs creator.
Features destroyer.
Template killer.

Re: How to easily remove menu icons?

Reply #7 –

hmm.. that does the trick too ::)

Re: How to easily remove menu icons?

Reply #8 –

 emanuele hopes it doesn't break anything else...
Bugs creator.
Features destroyer.
Template killer.

Re: How to easily remove menu icons?

Reply #9 –

I don't see any side effects ::)

Re: How to easily remove menu icons?

Reply #10 –

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 –

Try "float: right" instead of "float left"... I **think**.
Bugs creator.
Features destroyer.
Template killer.