logo标签列表

在SVG内显示字体awesome图标

javascripthtmlsvgunicodefont-awesome
5
我该如何在SVG片段中显示一个fontawesome图标？我尝试了以下方法，但它并不起作用：
<svg xmlns="http://www.w3.org/2000/svg">
<g>
  <rect x="0" y="0" width="100" height="100" fill="red" ></rect>
  <text x="30" y="30" font-family="FontAwesome" font-size="20" fill="blue" >&#xf042;</text>
</g>
</svg>

Unicode编码&#xf042;对应的是fa-adjust图标，可以在这里找到。另外，我如何从图标名称获取Unicode编码？

可能是如何在SVG中包含Font Awesome图标的重复问题？ - Sebbas
3个回答
6

你的样式表应该声明字体族

svg text {
   font-family: FontAwesome;
   font-size:20px;
   background-color:blue;
}

Html

<text x="30" y="30">&#xf042;</text>
4

  1. 将FontAwesome样式表添加到您的页面中（我使用的是5.14.10）

  2. 将“fas”（或“fa”）设置为svg文本元素的类。

  3. 在元素中，提供带有“＆amp;＃x”前缀的字符，而不是“\”（此示例是arrow-down（fa-var-arrow-down）箭头向下）

请参见下面的片段

<head>  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
        integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
        crossorigin="anonymous" />
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="500">
  <text x="0" y="15" class="fas">&#xf063;</text>
</svg>
</body>

最简单的方法。最佳答案。谢谢！ - Gavin G
1

假设您在文档中正确地包含了fontawesome css，那么您的代码应该可以正常工作。我将您的代码粘贴到一个fiddle中，并通过CDN包含了最新版本的fontawesome，它可以正常工作：http://jsfiddle.net/mayacoda/o59uak50/

对于第二部分，我假设您想要能够只输入图标名称而不必查找每个unicode。考虑到我不知道这个上下文，我还假设您正在使用javascript，并且可用的形式为具有键值对（名称：“unicode”）的对象。

您可以在cheatsheet页面上运行此脚本，它将扫描页面上的元素并返回一个类似以下方式的键值对对象：

{
 "fa-adjust": "&#xf042;"
 ...
}

在控制台中运行脚本。

(function () {
    var unicode = {};

    $('.fa').each(function() {
        var code = $(this).siblings().text().match(/\[(.*)\]/);
        code = code ? code[1] : '';

        var name = $(this).parent()[0].innerText.match(/\b(.*)\[/);
        if (!name || !name[1]) {
            return;
        }

        name = name[1].trim();
        unicode[name] = code;
    });

    return unicode;
})();
感谢指出jsfiddle，代码确实有效，我找到了问题：它是作为“&”插入的“&”！！ - bachr
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接