Suggestion: Further Default Normalization Styles about simple-icons-font HOT 8 CLOSED

Yes, they're needed. This is just a vanilla test, so doesn't take into account some common variables that might take place out in the wild.

font-style: normal protects the icons from warping if they're added between <em></em> tags. Note: this is already in the existing style reset.

line-height: normal protects the icons from overflow problems that can occur (especially on mobile) if the user has set the icons to a big enough size.

I even ran into an issue where I needed to use text-shadow: none, but that probably really is too aggressive in terms of finding the right balance for most users.

For what it's worth, I actually came up with my own hybrid solution where I combined the font method with actual svgs so that I could benefit from a lighter front-end load (the font method adds over 1mb to page load, and my method brings that down to under 100kb) and the responsiveness of svgs. Anyway, that's a discussion for another day, if anyone's interested.

from simple-icons-font.

Just a quick reminder that I'm not suggesting the addition of font-style: normal; it's already in the official code:

https://github.com/simple-icons/simple-icons-font/blob/develop/scripts/templates/base.css

The logic (I would assume) would be that while it's technically a font, that that's only a formality as a trick/method for delivering icons that shouldn't otherwise be treated like text. The same logic applies to line-height: normal and maybe there should even be font-weight: normal too. The icons should only appear exactly as intended concerning the shape/design of each respective icon, without warping/stylization of any kind beyond size and color.

Anyway, that's all I have to offer on the subject; I'll let you take it from here.

Thanks

from simple-icons-font.

Nope, the folder is there. Are you really sure that you're not getting it? This is the output in my console:

$ npm i --no-save simple-icons-font
$ tree node_modules/simple-icons-font
node_modules/simple-icons-font
├── DISCLAIMER.md
├── font
│   ├── simple-icons.css
│   ├── SimpleIcons.eot
│   ├── simple-icons.min.css
│   ├── SimpleIcons.otf
│   ├── SimpleIcons.ttf
│   ├── SimpleIcons.woff
│   └── SimpleIcons.woff2
├── LICENSE.md
├── package.json
└── README.md

1 directory, 11 files

from simple-icons-font.

Oh, I see. The fonts are generated dynamically through installation, for obvious practical reasons? They're not just sitting in a folder plainly, within the repo. I'm setting them up manually and just needed to straight download them, so that's why I was a bit confused.

from simple-icons-font.

Could you explain why we must add the following CSS properties?

        font-style: normal;
	line-height: normal;
	vertical-align: middle;

from simple-icons-font.

I threw together a quick demonstration:

https://bryanhadaway.com/testing/simple-icons.html

from simple-icons-font.

Thanks, but are the font-style: normal and line-height: normal properties needed? I can see the icon correctly positionated as well if I remove them:

from simple-icons-font.

Thank you for the report, but I think that:

• If an user puts an icon inside em tags it goes without saying that he wanted it to appear in italics. I suspect that the wrapping problem has to do with the source itself, I have opened #162 to track it.

  

• normal is the default value for the line-height property in CSS, so there are no need for that addition, it would be redundant.

For the problem of high load added by fonts, that's true. It would be great to expose the build process to create a customized build, filtering by icons slugs. I've opened #163 to track it.

So I'm fine with adding vertical-align: middle but I want to study before what other icon fonts like FontAwesome do.

from simple-icons-font.