Question

我正在一个Jekyll项目中，我想将Font Awesome Icon用作SVG，而无需立即声明它们。因此，我编写了一个jekyll插件，将其声明为函数时将其转换为Gem，以声明仅使用的图标。

我的问题是我的HTML代码很好，我可以看到SVG定义和SVG图标use，但是没有显示该图标，我只有一个shadow root (closed)。

能给我一些帮助吗？

这是一个实时演示，您可以在其中找到2个图标：https://deploy-preview-65--pedantic-ramanujan-f13a37.netlify.com/projet/bataille-navale/

它们是#fab.fa-dev和#fab.fa-facebook图标，应显示在图像下方。

我的svg的声明是

<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <defs>
            <symbol id="fab.fa-dev" viewBox="0 0 1024 1024">
            <title>dev</title>
            <path class="path1" d="&quot;M120.12 208.29c-3.88-2.9-7.77-4.35-11.65-4.35H91.03v104.47h17.45c3.88 0 7.77-1.45 11.65-4.35 3.88-2.9 5.82-7.25 5.82-13.06v-69.65c-.01-5.8-1.96-10.16-5.83-13.06zM404.1 32H43.9C19.7 32 .06 51.59 0 75.8v360.4C.06 460.41 19.7 480 43.9 480h360.2c24.21 0 43.84-19.59 43.9-43.8V75.8c-.06-24.21-19.7-43.8-43.9-43.8zM154.2 291.19c0 18.81-11.61 47.31-48.36 47.25h-46.4V172.98h47.38c35.44 0 47.36 28.46 47.37 47.28l.01 70.93zm100.68-88.66H201.6v38.42h32.57v29.57H201.6v38.41h53.29v29.57h-62.18c-11.16.29-20.44-8.53-20.72-19.69V193.7c-.27-11.15 8.56-20.41 19.71-20.69h63.19l-.01 29.52zm103.64 115.29c-13.2 30.75-36.85 24.63-47.44 0l-38.53-144.8h32.57l29.71 113.72 29.57-113.72h32.58l-38.46 144.8z"></path>
        </symbol>
        <symbol id="fab.fa-facebook" viewBox="0 0 1024 1024">
            <title>facebook</title>
            <path class="path1" d="&quot;M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z"></path>
        </symbol>

                </defs>
            </svg>

然后我像这样使用SVG：

<svg class="icon"><use xlink:href="#fab.fa-dev"></use></svg>

如果您需要有关该代码的更多详细信息，请参见此处的提取请求：https://github.com/sylvainmetayer/sylvainmetayer/pull/65

Answer 1

在编写路径公式时，引号无效-books: { name: "Book 1", comments: [{...}] }

& quot;

SVG未显示

1 个答案: