用 svg 替換字體真棒圖標

Question

我想用 svg 替換一個字體很棒的圖標。

例如，如果 css 類是class="'fa fa-square'" ，如何更改它以使用具有相同形狀square.svg的 svg 文件？

Answer 1

所有 font-awesome svg 都位於這個方便的 github repo Font Awesome SVG's

您可以將 svg 插入到跨度中，如下所示：*注意您需要更改行內高度和寬度，但保持視圖框不變。 要更改 svg 的顏色，請使用填充：#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>

Answer 2

我有同樣的願望，並通過Icomoon.io找到了自己的方式：

您可以（免費）生成僅包含您選擇的圖標的字體，並帶有漂亮的 GUI：

圖片中：Icomoon - GUI

（對不起，我不能在這里嵌入圖片，我是新來的，沒有足夠的“聲譽”..）

還提供了 CSS 和 HTML：

圖片中：Icomoon - GUI 2

唯一的缺點是，免費套餐不包括 WOFF2 文件（但您可以獲得 .eot、svg、ttf 和 woff - 您可以在網上找到 woff2 生成器）

你更喜歡SVG？ 沒問題，它還提供！

圖片中：Icomoon - 生成 SVG