Simplify _icon.scss a bit?

[imsadhappy]

Hi. There is a question I have concerning _icons.scss.

Why not use CSS [attribute^=value] selector, rather than enumerate all the .fi-[icon]:before (from line 18 to line 310)? Surely, this is how Foundation does it, but can it be more efficient?

Like this:

[class^="fi-"]:before {
font-family: "foundation-icons";
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
display: inline-block;
text-decoration: inherit;
}

[manwithacat]

As you've said, this is how Foundation does it. See Zurb's integration guide.
.
The github repo for the icons has all the mixins and SASS used to generate the CSS, and the code is very similar to how you've written it.

[olefredrik]

@imsadhappy : Will your code above work? I am always in favor of simplification. So if we can replace many lines with few lines, and get the same result (in all browsers), why not? Feel free to open a pull request :)

[imsadhappy]

@olefredrik : Well, I've tested it in Crome DevTools live on Foundation Icon Fonts 3. The specification on w3school for this is quite clear. The support is down to IE7. Everything looks safe and good to me.

[imsadhappy]

@olefredrik : Submitted the same at zurb/foundation-icon-fonts. Let's see what they have to say about it. So not to make FoundationPress differ much from its source.

[olefredrik]

Great 👍 Let's wait and see what they say about it. I'm keeping this issue open for now.

[olefredrik]

I decided to replace the Zurb Icon Fonts library with Font Awesome. The latter is in my opinion a better choice, as it has a larger selection of fonts, bigger community and is updated on a regular basis.

#222

[olefredrik]

#224

[imsadhappy]

Totally support you. This is by far, the best choice you could make. Font Awesome is the best icon font I've seen out there. It is constantly updated, with more and more new glyphs added. Great choice!

[themestechnology]

+1