gpt4 book ai didi

css - 文本显示为文字文本而不是图标

转载 作者:太空宇宙 更新时间:2023-11-04 10:17:30 25 4
gpt4 key购买 nike

我正在编写一些代码,以便在动态生成 SVG 图像的 Chrome(Windows 和 Android)中查看。我的代码是这样的

<head>
<style>
@font-face
{
font-family:"toolbar";
src:url('https://cdn.jsdelivr.net/fontawesome/4.6.2/fonts/fontawesome-
webfont.ttf') format('truetype');
}
</style>
//font to be packaged as a resource in the APK in due course. My current
//tests are on Chrome in Windows

<script>
$(document).ready(function()
{
var s = Snap('#world');
s.text(821,1385,'&#xf217;').attr({fill:'#FAD411',
"font-size":"10vw","font-family":"toolbar"});
}
</head>
<body>
<div id='svgbox'>
<svg id='world' height="100%" width="100%" viewBox="0 0 2000 2547"
preserveAspectRatio="xMidYMid meet">
//the SVG is created in here dynamically from code
</svg>
</div>
</body>
</html>

虽然其他一切正常 - 并且测试 toolbar 字体系列在 normal html 标记中实际可用成功 - 在 SVG 中,显示的文本是文字字符串 而不是我期望的 Fontawesome 购物车加号图标。我在这里做错了什么。

最佳答案

您必须将实际图标复制/粘贴到 HTML 中。看这个JSBin举个例子。在您的源代码中,它将显示为一个空框,但在呈现时它将正确显示图标。我从 Font Awesome cheatsheet 复制了图标.

var s = Snap('#world');
var text = s.text(821, 1385, '');
text.attr({
fill: '#FAD411',
fontSize: "15vw",
fontFamily: "toolbar"
});

This answer is similar根据您的要求,除了适用于此问题的唯一部分是“只需将您想要的实际 Unicode 字符放入文档中”。无需担心 meta 标记或编码类型。

关于css - 文本显示为文字文本而不是图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37117853/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com