ElkArte Community

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:

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

::)

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

[data-icon]:before {

and the relevant css is:

content: attr(data-icon);

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

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

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

padding: 3px 3px 0;

to:

padding: 2px 3px 2px;

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.  :-[

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:

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

	#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:

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

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

Before:
(http://i.imgur.com/noaqo5f.png)

After:
(http://i.imgur.com/nwmArVn.png)
Maybe this could be added in 1.0.1?

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

Okay, try adding to:

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

a:

float: left;

The change to the template should not be necessary. ;)

hmm.. that does the trick too ::)

/me hopes it doesn't break anything else...

I don't see any side effects ::)

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

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