ElkArte Community

Project Support => General ElkArte discussions => Topic started by: Antechinus on June 11, 2016, 01:45:23 pm

Title: Data icons via CSS: no eye candy locked into sources.
Post by: Antechinus on June 11, 2016, 01:45:23 pm
Since the icons are pure presentation they really should not be locked into sources. They should be handled in the CSS. You can do this, y'know. It's not even difficult.

http://chipcullen.com/using-icons-from-icon-fonts-directly-in-css/
Title: Re: Data icons via CSS: no eye candy locked into sources.
Post by: emanuele on June 11, 2016, 02:19:33 pm
Which one are you talking about?
The one in the main menu?
I actually always wondered why they were in the menu array. Well, in 1.1 they have been "converted" to a name and used just to create a:
Code: [Select]
<i class="icon icon-menu icon-big i-' . $button['data-icon'] . '"></i>
so basically they are no more locked in source. ;D
Title: Re: Data icons via CSS: no eye candy locked into sources.
Post by: Antechinus on June 11, 2016, 02:23:33 pm
Yeah, main menu. 1.1 sounds fine then. Except we aint got it yet. :D
Title: Re: Data icons via CSS: no eye candy locked into sources.
Post by: Spuds on June 11, 2016, 06:17:50 pm
Quote from: Antechinus – Yeah, main menu. 1.1 sounds fine then. Except we aint got it yet. :D
Thats due to all the bugs emanuele added :P  ... OK I may have added one or two dozen myself :P

Thats a very good read at the link , I did not know you could target like that, pretty cool really.
Title: Re: Data icons via CSS: no eye candy locked into sources.
Post by: Frenzie on June 14, 2016, 10:02:45 am
@Spuds Opera could already do that back in '02/'03 (well, excluding the web fonts and some of the newer selectors). Took the other browsers a while to catch up, but I think the whole shebang (generated content, selectors & web fonts) has been pretty mainstream since at least '09/'10-ish. ;)

That being said, classnames are much faster and might be useful for other purposes, so there's really nothing particularly wrong with the current approach as outlined by @emanuele besides that e.g. .icon and .icon-menu smell redundant. After all, you've already got #main_menu .icon or whatever, so yeah… heck, even just #main_menu li might do without any classnames depending on the specifics.

On the CSS side you'd have

Code: [Select]
.icon, .icon-big, .icon-lalala {shared junk}
.icon-big {non-shared junk}

But that's nitpicking and partially a matter of personal taste anyway.
Title: Re: Data icons via CSS: no eye candy locked into sources.
Post by: Antechinus on June 14, 2016, 05:06:03 pm
Must admit I did think class="icon icon-menu icon-big i-' . $button['data-icon'] . '" looked a bit over the top. One or two classes, sure. Four classes? Something looks wrong.
Title: Re: Data icons via CSS: no eye candy locked into sources.
Post by: emanuele on June 14, 2016, 05:56:47 pm
The more the better!
Title: Re: Data icons via CSS: no eye candy locked into sources.
Post by: Antechinus on June 15, 2016, 01:45:50 am
/me kicks Ema
Title: Re: Data icons via CSS: no eye candy locked into sources.
Post by: Vekseid on June 21, 2016, 06:50:30 pm
I spend all that effort clearing out css cruft and you nuts go straight to adding it back in again : p
Title: Re: Data icons via CSS: no eye candy locked into sources.
Post by: Antechinus on June 22, 2016, 05:58:35 pm
He always does that. :P