在 svg 中显示超赞的图标
[英]Displaying fontawesome icons inside svg
问题描述
How I could display an fontawesome icon inside an svg snipet?
我如何在 svg snipet 中显示一个 fontawesome 图标？ I tried with the following but it doesn't work:我尝试了以下操作，但不起作用：
<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" ></text>
</g>
</svg>
The unicode  Unicode  corresponds to the fa-adjust icon as can be found here .对应于可在此处找到的 fa-adjust 图标。 Also, How I could get the unicode from the icon's name?另外，我如何从图标的名称中获取 unicode？
3 个解决方案
解决方案1
6
Your stylesheet should declare the font-family你的样式表应该声明 font-family
svg text {
font-family: FontAwesome;
font-size:20px;
background-color:blue;
}
Html html
<text x="30" y="30"></text>
解决方案2
1 2015-05-04 20:08:31
Your code should work, assuming you're including the fontawesome css correctly inside your document.您的代码应该可以工作，假设您在文档中正确包含了 fontawesome css。 I literally pasted your code into a fiddle and included the latest version of fontawesome via CDN and it worked: http://jsfiddle.net/mayacoda/o59uak50/我真的把你的代码粘贴到了一个小提琴中，并通过 CDN 包含了最新版本的 fontawesome 并且它起作用了： http : //jsfiddle.net/mayacoda/o59uak50/
For the second part, I'm assuming you want to be able to just type the icon name without having to look up every unicode.对于第二部分，我假设您希望能够只输入图标名称而不必查找每个 unicode。 Considering I don't know the context for this, I'm also going to assume that you're using javascript and a useable form for this functionality would be an object with key-value pairs (name: "unicode").考虑到我不知道上下文，我还将假设您正在使用 javascript，并且此功能的可用形式将是具有键值对的对象（名称：“unicode”）。
You can run this script on the cheatsheet page, it will scan through the elements on the page and return an object with key-value pairs like so:您可以在备忘单页面上运行此脚本，它将扫描页面上的元素并返回一个具有键值对的对象，如下所示：
{
"fa-adjust": ""
...
}
Run the script in the console.在控制台中运行脚本。
(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;
})();
解决方案3
0 2020-10-03 23:33:06
Add the FontAwesome stylesheet to your page (I used 5.14.10)
将 FontAwesome 样式表添加到您的页面（我使用 5.14.10）set 'fas' (or 'fa') as class of the svg text element.
将“fas”（或“fa”）设置为 svg 文本元素的类。in the element, provide the character with "&#x" in front in stead of "\\" (this example is an arrow-down (fa-var-arrow-down)
在元素中，在字符前面提供“&#x”而不是“\\”（此示例是向下箭头（fa-var-arrow-down）
See snippet below见下面的片段
<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"></text> </svg> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.