如何在我的 svg 中包含一个很棒的字体图标?
Posted
技术标签:
【中文标题】如何在我的 svg 中包含一个很棒的字体图标?【英文标题】:How do I include a font awesome icon in my svg? 【发布时间】:2013-02-05 16:47:24 【问题描述】:我有一个包含图片的 svg:
<g><image id="myImage" class="myClass" x="12" y="15" xlink:href="/images/pic.png"/></g>
如何用字体真棒图标替换该行:
<g><i class="icon icon-cloud-download" x="12" y="15" ></i></g>
似乎无法正常工作,因为图像没有显示出来。
【问题讨论】:
您需要从 svg 中获取字形元素。 我发现这个解决方案效果最好:***.com/questions/11243677/… 【参考方案1】:i
不是有效的 SVG。您需要包含显示图标的实际字符。如果您查看font awesome's stylesheet,您会看到...
.icon-group:before content: "\f0c0";
.icon-link:before content: "\f0c1";
.icon-cloud:before content: "\f0c2";
.icon-beaker:before content: "\f0c3";
.icon-cut:before content: "\f0c4";
.icon-copy:before content: "\f0c5";
.icon-paper-clip:before content: "\f0c6";
.icon-save:before content: "\f0c7";
.icon-sign-blank:before content: "\f0c8";
.icon-reorder:before content: "\f0c9";
.icon-list-ul:before content: "\f0ca";
.icon-list-ol:before content: "\f0cb";
.icon-strikethrough:before content: "\f0cc";
.icon-underline:before content: "\f0cd";
.icon-table:before content: "\f0ce";
但那些是为 CSS 编码的 unicode 字符。在 SVG 中,您需要将示例 \f040
的语法更改为:
<g><text x="0" y="0"></text></g>
然后在你的样式表中添加:
svg text
font-family: FontAwesome;
根据 Niek 的评论,如果你使用 Font Awesome 5+ 的免费版本,你必须使用下面的 font-family 声明:
svg text
font-family: 'Font Awesome 5 Free';
【讨论】:
要拥有一个带有嵌入字体的独立 SVG,您需要将字体作为数据 uri 嵌入,如果您需要详细信息,请打开一个新问题。 由于某种原因它对我不起作用。我有<g class="info-container" transform="translate(240,283)"><text class="svg-icon" x="-60" y="0">&amp;#xf040</text></g>
和风格 .svg-icon font-family: FontAwesome;
但它没有帮助。 FontAwesome.css 附加到页面。图标显示为文本。为什么会这样?
@sedovav:这是我必须做的才能让它在 d3.js 中工作。 ***.com/a/12883617/127203。基本上文本应该是“\uf040”。
@Glenn 你是真正的 MVP!
@Glenn - 也许你应该编辑答案 - \u 有效,&x 绝对无效。【参考方案2】:
my Demo
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div title="Code: 0xe800" class="the-icons span3">
<H3>Standard using:</H3>
<i class="fa fa-camera-retro fa-4x"></i>
<br>
<H3>SVG using:</H3>
</body>
</html>
JS
var svg = d3.select("body")
.append("svg")
.attr("width", 250)
.attr("height", 250);
svg.append("text")
.attr("x",0)
.attr("y",70)
.attr("font-family","FontAwesome")
.attr('font-size', function(d) return '70px'; )
.text(function(d) return '\uf083'; );
【讨论】:
感谢 function(d) return '\uf083'; 的示例,我花了一段时间才找到这个解决方案。 当我尝试使用 window.btoa 保存此 svg 时出现错误 Uncaught DOMException: Failed to execute 'btoa' on 'Window': 要编码的字符串包含超出Latin1 范围。(…) 谢谢,但我想知道使用 HTML 实体和 D3jstext
函数将字符串添加到 HTML 元素有什么区别?像 '\uf083' 和
这似乎不适用于所有代码 \uf185 \uf186 \uf763 \uf7ad以上是关于如何在我的 svg 中包含一个很棒的字体图标?的主要内容,如果未能解决你的问题,请参考以下文章