search

feathericons / feather

Simply beautiful open-source icons
https://feathericons.com
MIT License
24.75k stars 1.21k forks source link

Make icon follow font-size #727

Open 1aron opened 5 years ago

1aron commented 5 years ago

Making icon follow font-size would be useful.

like font awesome：https://fontawesome.com/

locness3 commented 5 years ago

Sadly, this would be hard since feather is using SVGs, which are sized with a width and height. Font awesome icons are special characters in their font.

CreativeBulma commented 4 years ago

Wrong. since v5 fontawesome is using SVG by default. And its following font-size. Which is as @aron19951209 says very useful.

colebemis commented 4 years ago

You can size the icons relative to the font size using em units (e.g. 1em, 1.5em): https://www.impressivewebs.com/understanding-em-units-css/

CreativeBulma commented 4 years ago

Currently this behavior is not working due to the fact that feather javascript part force width and size to the SVG. The current solution is to set width and height attribute on the html tag to tell feather to set a specific size to the icon. But if we just change the font size feather's icons stay sticked to the width/height and not the font size.

colebemis commented 4 years ago

Here's an example of how it can be done: https://codepen.io/team/GitHub/pen/pooqowJ

There are many way to achieve a similar effect but most of them probably involve using em. Hope this helps :)

CreativeBulma commented 4 years ago

@colebemis my bad I didn't undestand you meant setting em unit on feather initialization. Thanks a lot for the help.

locness3 commented 4 years ago

Wrong. since v5 fontawesome is using SVG by default.

Yeah, but not inline SVGs ? AFAIK it inserts icons with :before element, it's CSS only.. I could be wrong though.

CreativeBulma commented 4 years ago

Wrong. since v5 fontawesome is using SVG by default.

Yeah, but not inline SVGs ? AFAIK it inserts icons with :before element, it's CSS only.. I could be wrong though.

Yes it does replace 

<i class="fas fa-..."></i>

with inline SVG.

You just have to include JavaScript file generated from https://fontawesome.com/start

locness3 commented 4 years ago

Oh OK.

hamlet commented 4 years ago

Here's an example of how it can be done: https://codepen.io/team/GitHub/pen/pooqowJ

This should be on the front page : feather.replace({width: '1em', height: '1em'})

reresetyawan commented 3 years ago

In React, i used this way: <Icon.Search size={16} />

and it's work!

hairullana commented 1 year ago

You can size the icons relative to the font size using em units (e.g. 1em, 1.5em): https://www.impressivewebs.com/understanding-em-units-css/

I still can't change the font size with em units image

The icons follow that attribute to make sure the size image

hairullana commented 1 year ago

Here's an example of how it can be done: https://codepen.io/team/GitHub/pen/pooqowJ

This should be on the front page : feather.replace({width: '1em', height: '1em'})

But it'll change all icon How to change some icon, because sometime I need icon with big size, sometime with small size?

hairullana commented 1 year ago

The icon will render as an asset, not fonts, so you can't use font-size to change the icon's size. image

The only way to change size of feather icons is set width and height attribute. image

This is the result image