用svg替换字体真棒图标

时间:2018-09-20 14:08:10

标签: html css svg icons font-awesome

我想用和svg替换超棒的字体图标。

例如,如果css类是class="'fa fa-square'",如何更改它以使用具有相同形状square.svg的svg文件?

2 个答案:

答案 0 :(得分:1)

所有字体超赞的svg都位于此方便的github存储库中 Font Awesome SVG's

您可以将svg插入跨度中,如下所示:*请注意,您需要更改内联的高度和宽度,但视图框保持原样。要更改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>

答案 1 :(得分:0)

我也有同样的愿望,并通过Icomoon.io找到了自己的路:

您可以(免费)使用漂亮的GUI生成仅包含所选图标的字体:

In picture: Icomoon - GUI

(对不起,我无法在此处嵌入图片,我是SO的新手,并且没有足够的“信誉”。)

还提供了CSS和HTML:

In picture: Icomoon - GUI 2

唯一的缺点是,免费套餐不包含WOFF2文件(但是您会获得.eot,svg,ttf和woof-您可能会在线找到woff2生成器)

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

In picture: Icomoon - generate SVG

相关问题