Open 1aron opened 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.
Wrong. since v5 fontawesome is using SVG by default. And its following font-size. Which is as @aron19951209 says very useful.
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/
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.
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 :)
@colebemis my bad I didn't undestand you meant setting em
unit on feather initialization.
Thanks a lot for the help.
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.
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
Oh OK.
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'})
In React, i used this way:
<Icon.Search size={16} />
and it's work!
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
The icons follow that attribute to make sure the size
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?
The icon will render as an asset, not fonts, so you can't use font-size to change the icon's size.
The only way to change size of feather icons is set width and height attribute.
This is the result
Making icon follow font-size would be useful.
like font awesome:https://fontawesome.com/