javascript - 如何使用 Javascript 将 FontAwesome 渲染为 SVG 图像？-6ren

javascript - 如何使用 Javascript 将 FontAwesome 渲染为 SVG 图像？

转载作者：太空狗更新时间：2023-10-29 15:02:55

24

4

我想将 FontAwesome 图标呈现为 SVG，使用 Javascript 将其动态提供为图像源。我希望我的输出是这样的

PS - 我会自己画圆圈。只需要一种方法来呈现图标。

到目前为止，我已经尝试过这种方法:

function addSVG() {

  var ele = document.getElementById("svg");

  var svg = `<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
        <text x="4" y="15" style="font-family: FontAwesome" fill="red">&#xf007;</text>
    </svg>`

  var output = 'data:image/svg+xml;base64,' + btoa(svg)

  ele.src = output;
}
addSVG()

<head>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
</head>

<body>
What it should look like:
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
    <text x="4" y="15" style="font-family: FontAwesome" fill="red">&#xf007;</text>
  </svg>
What it looks like:
  <img id="svg">
</body>

如您所见，没有 Javascript(仅在 HTML 中使用 SVG)它工作正常。

最佳答案

为什么在 img 标签中需要它？ SVG 是图像!您不需要它来放入其他东西。

可能我不知道你的什么，但我认为这只是你的一个坏主意。

我的建议:将 SVG 直接放在带有超棒图标的 HTML 中:

Your benefit from this: all modern browsers support it without any limits like in img tags or as background image.

var divSvg = document.getElementById('svg'),
    pics =
    {
        user: {col: '00a', icon: 'f007'},
        home: {col: '08c', icon: 'f015'},
        folder: {col: '88f', icon: 'f07c'},
        gear: {col: '5a0', icon: 'f013'},
        flag: {col: '05a', icon: 'f024'},
        leaf: {col: '080', icon: 'f06c'}
    },
    svg =
'<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">\
    <text x="4" y="24" fill="COLOR" style="font:24px FontAwesome;cursor:pointer">PIC</text>\
</svg>';

for(var title in pics)
{
    var newSVG = svg.replace('PIC', '&#x'+pics[title].icon+';');
    //we put it in "B" tag to have a title because IE
    //does not support title attribute and title tag in SVG
    divSvg.innerHTML += '<b title="' + title + '">' +
                    newSVG.replace('COLOR', '#'+pics[title].col) + '</b>';
}

divSvg.onclick = function(e)
{
    if(e.target.tagName == 'text')
    {
        document.getElementById('output').innerHTML = 'Was clicked on ' +
                                // we take title from "B" tag:
                                e.target.parentNode.parentNode.title;

        /* if you need you can use:
        switch(e.target.parentNode.parentNode.title)
        {
            case 'user': alert('Here some procedure with user');
            case ...     YOUR CODE
            and so on... YOUR CODE
        }*/
    }
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<div id="svg"></div><br>
<div id="output">Please click on any icon.</div>

关于javascript - 如何使用 Javascript 将 FontAwesome 渲染为 SVG 图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51196884/

24

4

0

文章推荐： c - 在 ANSI C 中声明常量变量的标准是什么？

文章推荐： c - 中止陷阱而不是缓冲区溢出

文章推荐： c - 家庭作业 - 无法利用缓冲区溢出

文章推荐： c - 使用 free() 释放指针后使用指针

vue.js - 无法解析@fontawesome all/fontawesome-free
我正在使用 vue.js 2 - 我在我的 App.vue 中添加了一些 mdi 图标，这会在我的项目中生成一个新错误当我尝试为我的项目提供服务时，但出现如下错误我还应用了一些命令，但它没有解决我
css - 我应该使用 fontawesome-free 还是 angular-fontawesome
我们正在启动一个 Angular 6 元素并希望使用 Font Awesome 5.1。 Font Awesome 提供了两个 Node 包: @fortawesome/angular-fontawe
javascript - 如何将自定义 SVG 图标添加到本地 fontawesome 库 (fontawesome-all.js)？
我有一个自定义 SVG 图标，我想将其添加到我的本地 fontawesome 库 (fontawesome-all.js)，我根据此处提供的说明将其包含在我的项目资源文件夹中: https://fon
javascript - 除了使用 Fontawesome Unicode，我们如何使用 Fontawesome 类来创建带有图标的 Accordion ？
目前我有这个可以展开和折叠的 Accordion :https://jsfiddle.net/cliffeee/a5uxgkmt/15/ . 我想使用 fontawesome 为 Accordion
css - 未找到模块 : Error: Can't resolve './@fortawesome/fontawesome-free/css/fontawesome.css'
我正在尝试使用 Font Awesome 5.1.0 在 webpack 4. webpack配置文件的内容: const HtmlWebPackPlugin = require("html-webp
javascript - 如何使用 fontawesome 图标更改选择标签内的箭头图标。我正在使用 Vue-Cli。我在 main.js 中导入了 fontawesome
我正在使用 vue-cli。我对 vue 很陌生。我正在尝试更改选择标签右上角的箭头符号。我该怎么做？我尝试寻找解决方案，发现我需要使用 css。但是我们如何在 css 中使用 font-awesom
asp.net-mvc - FontAwesome fontawesome-webfont.woff2?v=4.5.0 404 未找到
我在我的 asp.net mvc 项目中使用 fontawesome 4.5。我在控制台上遇到以下错误我已经在我的字体文件夹中包含了字体并在layout.cshtml中为fontwesome样式表
HTML:fontawesome 图标出现两次
我正在尝试使用 HTML5 和 FontAwesome 制作网页。我的问题是:如果我包含一个 FontAwesome 图标，它会出现两次，并且两个副本会相互堆叠(参见此处:image) 我更改了一些
css - FontAwesome 图标未显示
我在页面上的几个地方使用了 Font Awesome 图标，但是当我想在 CSS 中使用它时，它没有显示。我在这里遇到了很多问题，因为我看到其他人也有同样的问题，但没有一个解决方案对我有用: 我的 F
icons - FontAwesome 图标仅在鼠标悬停时旋转？
在 Font Awesome 我如何使用此代码:仅在鼠标悬停上工作？最佳答案除了覆盖类之外，您还可以创建另一个仅用于悬停的类: .fa-spin-hover:hover { -webkit-a
Angular 不能在动态组件中使用 fontawesome
我用这个 post 来动态加载一些组件 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; const te
reactjs - 找不到图标react-fontawesome
我有一个关于 React 的项目，我需要将 FontAwesome 集成到其中。我找到官方library并按照自述文件中的说明安装它 $ npm i --save @fortawesome/fonta
javascript - 比特币股票代码 + fontawesome
我的任务是编写一个函数，从 JSON 链接获取比特币交易，使用按钮更改间隔，添加漂亮的向上/向下/线条箭头，具体取决于汇率是否上升/下降/没有变化，并将其显示在网站上。我什么都有，除了fontawe
cdn - Fontawesome 跨源问题
我想从 CDN 加载 Fontawesome，但我得到了跨域请求失败。资源访问受到限制我知道要解决此问题，应该添加 HTTP header ，但是有什么方法可以避免这样做吗？我尝试更换'../f
html - Fontawesome 的旧图标列表
Fontawesome 现在已升级到第 5 版，但我们的许多应用程序仍处于旧版本。我怎样才能找到带有他们的旧版本图标的 content (CSS 属性)列表？最佳答案进入图标页面。然后单击左上 A
cdn - Fontawesome 跨源问题
我想从 CDN 加载 Fontawesome，但我得到了跨源请求失败。资源访问受限我知道要解决这个问题，应该添加一个 HTTP header ，但是有什么办法可以避免这样做吗？我试过更换'../
fonts - XeLaTex + FontAwesome
我正在尝试在 OS X 上的 XeLaTex 中使用 FontAwesome。所以我按照此github中描述的步骤进行操作: 将其保存到您的项目文件夹中，命名为 fontawesome.sty 将\u
javascript - Fontawesome 图标文本出现而不是图标
这个问题在这里已经有了答案: jquery .text doesn't render HTML elements into the DOM (3 个答案) 关闭 4 年前。 jquery 3.3.1
html - FontAwesome - 手动堆叠
我正在尝试手动堆叠 Soundcloud 图标并将其显示在正方形上，就像 fa-facebook-square 一样，但我的 Soundcloud 图标是在广场下方创建的。到目前为止，这是我的代码:
html - 缺少图标 FontAwesome
很长一段时间以来，一些 FontAwesome(最新版本)图标在我的元素中不起作用，例如 fa-hashtag，但还有一些其他图标也不起作用。已经在堆栈中检查了一些解决方案，但没有任何效果。这里是如

首页

博学

6Ren·AI

商城

javascript - 如何使用 Javascript 将 FontAwesome 渲染为 SVG 图像？