css 将font awesome icon替换为svg

h9vpoimq  于 2023-10-21  发布在  其他
关注(0)|答案(2)|浏览(125)

我想用和svg替换font-awesome图标。
例如,如果css类是class="'fa fa-square'",如何改变它以使用具有相同形状square.svg的svg文件?

41zrol4v

41zrol4v1#

所有的font-awesome svg都位于这个方便的github repo Font Awesome SVG's
你可以将svg插入到一个span中,像这样:* 注意你需要改变行内的高度和宽度,但保持viewbox不变。要更改svg的颜色,请使用fill:#colorvalue

<span>
    <svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1664 416v960q0 119-84.5 203.5t-203.5 84.5h-960q-119 0-203.5-84.5t-84.5-203.5v-960q0-119 84.5-203.5t203.5-84.5h960q119 0 203.5 84.5t84.5 203.5z"/></svg>
</span>
hfsqlsce

hfsqlsce2#

我有同样的愿望,并找到了我的方式与Icomoon.io
你可以(免费)生成一个字体,只包括你选择的图标,有一个漂亮的GUI:

还提供了CSS和HTML:

唯一的缺点,免费层不包括WOFF 2文件(但你得到.eot,svg,ttf和WOFF -你可以在网上找到WOFF 2生成器)

**您更喜欢SVG?**没问题,也提供了!

相关问题