在svg内显示fontawesome图标

时间:2015-05-04 14:41:14

标签: javascript html svg unicode font-awesome

如何在svg snipet中显示一个fontawesome图标?我尝试了以下但是它不起作用:

'0777'

unicode <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> 对应于可以找到的fa-adjust图标here。另外,我如何从图标的名称中获取unicode?

3 个答案:

答案 0 :(得分:3)

您的样式表应声明font-family

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

HTML

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

答案 1 :(得分:1)

您的代码应该有效,假设您在文档中正确包含了fontawesome css。我将你的代码粘贴到一个小提琴中,并通过CDN包含最新版本的fontawesome,它起作用了:http://jsfiddle.net/mayacoda/o59uak50/

对于第二部分,我假设您希望能够只需键入图标名称而无需查找每个unicode。考虑到我不知道相关的上下文,我也会假设您使用javascript并且此功能的可用表单将是具有键值对的对象(名称:& #34;的unicode&#34;。)

您可以在备忘单页面上运行此脚本,它将扫描页面上的元素并返回一个具有键值对的对象,如下所示:

{
 "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;
})();

答案 2 :(得分:0)

  1. 将FontAwesome样式表添加到您的页面(我使用的是5.14.10)

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

  3. 在元素中,在字符前面提供“&#x”,而不是“ \”(此示例是向下箭头(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>