如何用javascript动态添加一个字体很棒的图标？
要用JavaScript动态添加一个字体很棒的图标，可以使用字体图标库来实现。字体图标是一种使用字体文件来显示图标的技术，它可以通过CSS样式来控制图标的大小、颜色等属性。
以下是一种常见的实现方法：
- 首先，选择一个合适的字体图标库，例如Font Awesome（https://fontawesome.com/）或Iconfont（https://www.iconfont.cn/）等。这些库提供了大量的图标供选择，并且有详细的文档和使用说明。
- 在HTML文件中引入字体图标库的CSS文件。可以通过在
<head>标签中添加如下代码来引入Font Awesome的CSS文件：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">- 在JavaScript中创建一个元素（例如
<i>标签），并为其添加合适的CSS类名来指定所需的图标。可以使用document.createElement方法创建元素，并使用element.classList.add方法添加CSS类名。
var icon = document.createElement('i');
icon.classList.add('fas', 'fa-heart');在上述代码中，fas和fa-heart是Font Awesome库中的CSS类名，分别表示图标的样式和具体图标。
- 将创建的元素添加到页面中的合适位置。可以使用
appendChild方法将元素添加到指定的父元素中。
var parentElement = document.getElementById('icon-container');
parentElement.appendChild(icon);在上述代码中，icon-container是一个具有合适id的父元素，用于容纳图标。
通过以上步骤，就可以使用JavaScript动态添加一个字体很棒的图标了。请注意，具体的CSS类名和图标样式取决于所选择的字体图标库，可以根据库的文档进行相应的调整。
推荐的腾讯云相关产品：腾讯云字体图标库（https://cloud.tencent.com/product/iconfont）提供了丰富的图标资源供开发者使用，可以根据需要选择合适的图标进行应用。
相关·内容
1回答
我在“资产”文件夹中添加了字体--令人敬畏的.tff文件，对strings.xml文件中的一些图标进行了初始化，更改了我将要使用的实体的字体--很棒，并且尝试使用字体--在按钮上很棒，而且它也能工作，但我对编辑文本也做了同样的操作，但是有字符串而不是图标。知道我能做什么吗？
浏览 4提问于2015-06-19得票数 0
回答已采纳
3回答
我有一个搜索栏显示在我的wordpress网站，并已使用jquery取代“搜索”字，并希望使用一个图标从字体棒。然而，它只是显示字体可怕的代码，而不是图标。
如何用一个字体出色的图标替换提交按钮文本？
我似乎不能编辑“值”，因为这是在一个边栏。这就是我目前所拥有的..。
<form role="search" method="get" id="searchform" class="searchform" action="http://localhost/">
<di
浏览 2提问于2016-01-08得票数 3
回答已采纳
我制作了unity游戏，我需要图标。
我认为字体很棒的图标是最好的。
如何获取这些图标的.png文件？
我不能把css放在unity游戏中。
我试着下载其他图标，但这些图片都不好。
浏览 0提问于2016-01-04得票数 13
回答已采纳
3回答
我是使用html，css3和jquery。我想在jquery中使用字体很棒的图标。但我不知道如何在Jquery中使用字体强大的图标。
字体图标：
<i class="fa-spinnerZoom fa fa-spinner fa-pulse fa-3x fa-fw "></i>
代码：
<div class="display-icon">
<i class="fa-spinnerZoom fa fa-spinner fa-pulse fa-3x fa-fw "></i>
&
浏览 1提问于2016-04-16得票数 3
回答已采纳
我想得到一个字体很棒的图标。它位于::before风格。当我用
window.getComputedStyle(document.querySelector("[id='5']"), '::before').getPropertyValue('content')
为了得到它，返回的不是"\f458"，而是"\"\""。
我假设JavaScript试图将代码转换为char，但失败了。有什么办法可以防止这种情况发生吗？
浏览 0提问于2021-07-19得票数 1
回答已采纳
1回答
如何根据元素的内容设置图标？
、、、、
具有下列结构的图标是如何工作的？
<span class="material-icons">
accessibility_new
</span>
我一直在探索，试图理解图标是如何由HTML的内容决定的，但在我的生命中却无法弄清楚。
我怀疑这与有关，但当我尝试在字体中打开它们时，没有任何负载。
编辑：--我知道如何使用材料图标本身，但我试图理解如何用自己的图标字体重新创建这个功能。
浏览 1提问于2020-12-16得票数 0
1回答
字体很棒的图标不显示，它们显示方框而不是图标
我正在尝试制作一个营销页面的原型，我正在使用bootstrap和新的字体很棒的文件。问题是，当我尝试使用一个图标时，所有的图标都会呈现在页面上的一个大方块中。
浏览 1提问于2013-11-29得票数 1
3回答
我想把click事件绑定到一个很棒的字体图标上。然而，图标本身是不可点击的，只有当我插入额外的文本时，该文本才会被绑定。
如何绑定图标本身？
<span class="icon-star">
only this text is clickable, the icon itself is not
</span>
<script type="text/javascript">
(function($) {
$('span.icon-star').on('click', functi
浏览 0提问于2012-09-10得票数 3
回答已采纳
1回答
我建立了一个Chrome扩展，在网页上突出显示电话号码。除了高亮显示数字之外，我还想在每个数字的末尾添加一个图标。在这里，我有两个选择：
使用字体很棒的图标。
使用.ico文件。
有一个问题，字体可怕的图标。当我尝试字体令人敬畏的独角兽，他们是呈现为空白方块和与fa-电话类，没有任何渲染，可能是因为特定的网站可能不支持字体令人敬畏的图标。我不知道如何解决这个问题。
如果字体不是一个好主意，那么我想知道，如何在.ico文件中添加<span>。
浏览 5提问于2017-09-08得票数 2
我在我的(mvc/asp.net)项目中使用了很棒的字体。我的问题是，我正在调试这个项目并检查localhost，字体很棒的图标没有问题。但当我发布网站并在网上查看时，我看到的不是图标，而是小方框。我确信它被放置在正确的目录中(放置css文件的位置)。
我找不到任何合适的解决方案。
顺便说一句，按钮也没有问题。他们都很好，但是图标已经消失了。
谢谢
浏览 3提问于2013-02-15得票数 58
回答已采纳
3回答
我想知道如何用很棒的字体图标替换提交按钮，我自己已经试过了，但是图标不会显示在按钮上。以下是我到目前为止所做的工作：
<form action="{{route('destroycourse', $course->id)}}" method="POST">
<input type="hidden" name="_method" value="DELETE">
<input type="hidden" name="_token&#
浏览 0提问于2017-06-20得票数 2
回答已采纳
3回答
我正在尝试在自己编写的checkbox组件中动态地呈现令人敬畏的字体图标。当我在点击一个带有字体的图标时，它并没有更新。我试着将渲染移到单独的函数中，并尝试使用react-fontawesome，但都没有用。状态正在更新，但是在html中，字体很棒的图标是相同的svg代码。
...
state = {
checked: this.props.checked
}
toggleCheck = () => {
this.setState({ checked: !this.state.checked });
};
render () {
const iconUnchecked
浏览 53提问于2018-04-18得票数 9
回答已采纳
3回答
下午好,
我在我的网站上添加了一些很棒的字体图标，它们看起来很棒。我想要在用户单击折叠内容时在上下角度之间切换。
这个javascript做得很好：
$(function() {
$('a').click(function() {
$(this).find('i').toggleClass('fa-angle-down fa-angle-up');
});
});
我遇到的问题是，当我单击所有其他在页面上插入到标签中的图标时，它们也会切换到显示向下的角度。例如，这个不应该切换：
<i class="f
浏览 2提问于2017-08-18得票数 0
1回答
自学:将字体-令人敬畏的
、、、
我对HTML和CSS非常陌生。我想先做一个免费的模板，看看模板后面发生了什么。我使用。它使用字体-令人敬畏的图标。我知道字体很棒没有像“研究之门”和“研究院”之类的图标.我想通过使用来实现它们。但我做不到！我跟踪了所有已经写好的东西，但它仍然没有显示出来，比如说，研究之门图标！你能帮我一下吗？提前感谢！
浏览 6提问于2015-09-22得票数 1
回答已采纳
1回答
没有显示可怕的字体图标
、、、
我有一个问题，在我的网站，biaterg.com；可怕的字体图标显示为一个空广场，而不是正确的图标。你能帮帮我吗?我尝试过几种方法；服务器区域设置是它_IT.utf-8，所以我认为它是正确的；字体文件夹存在于特定的路径中。我快疯了..。我试图改用本机语言(en_US和en_GB)；问题依然存在。我试过在apache2和litespeed服务器上；服务器不提供令人敬畏的字体图标。如果我试图将css中的内容从"\fd0a“更改为"\1f355"，它就能工作，但是第二段代码不是很棒的字体图标，它只是css图标。请帮帮我!
浏览 8提问于2017-04-11得票数 0
回答已采纳
2回答
我正在尝试将悬停效果同时应用于两个不同的元素，这意味着当我将鼠标悬停在一个元素上时，我也是另一个具有悬停效果的元素。这两个元素是一个简单的文本和一个图标(使用很棒的字体)。有没有办法只用html和css来做到这一点？或者我需要使用javascript吗？
非常感谢!
浏览 0提问于2015-11-23得票数 0
6回答
我无法让字体很棒的图标与LitElement一起工作，因为CSS样式不会穿透自定义元素的阴影边界。
是否可以在LitElement中使用字体、图标或其他图标？
浏览 1提问于2018-05-15得票数 8
回答已采纳
我想有一个输入选择与图像的选择作为一个选项(将定义自定义图标)。我可以把一个图片或图标的字体很棒。我试着把
<select>
<option><i class='fas fa-shopping-bag'/></option>
<select>
或者替换为图像，但都不起作用。字体很棒的字体，我用unicode尝试过，也不能工作，你知道怎么做吗？
谢谢
浏览 4提问于2018-07-15得票数 0
我使用字体-令人敬畏，但只需要一个小的图标子集。我一直在使用：
然而，这似乎不是最新的。
我想知道为什么字体很棒的人没有类似的东西。有没有人找到一个最新的网站，我可以使用，如icnfnt.com，但它适用于最新的字体集。
浏览 3提问于2013-10-01得票数 0
回答已采纳
1回答
我想在QML中使用图标字体，所以我下载了一个很棒的，但是当我试图加载这个文件并在QML中使用它时，它不起作用。我使用FontLoader，然后将我想要的图标的unicode字符串设置为Text元素的text属性。在下面的代码中，当文本无法正确解释unicode字符串(从Line Awesome网站复制)时。
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.12
Window {
id: window
visible: true
width: 1000
height
浏览 0提问于2020-06-29得票数 0
3回答
我使用angular 5已经有一段时间了，似乎我不能在我构建的项目中加载任何字体很棒的图标。
我完全遵循了下面的链接中提到的步骤。
似乎CSS文件包含在项目中，但它无法加载字体，因为我在浏览器的开发人员工具的网络部分进行了检查。
我在渲染的页面中看到的只是方形图标，而不是令人惊叹的字体图标。
如果有人能帮我这个忙，我将不胜感激。
浏览 1提问于2018-01-08得票数 4
回答已采纳
我会使用Font Awesome中的几个图标。
我看到我们可以下载整个字体很棒的目录，使用像<i class="fa fa-camera-retro"></i>这样的简单代码，并使用fa-camera-retro来显示图标。
我可以只下载我要使用的字体吗？
对于上面的示例，如果我只使用<i class="fa fa-camera-retro"></i>，fa-camera-retro，我想通过只使用与此图标相关的文件来减小目录大小。
浏览 3提问于2014-04-21得票数 70
我希望在上使用MAC的图标
如何访问这些图标，将它们从MAC系统导出到png文件，或者在可可代码中动态访问它们？
欢迎各位委员光临。
谢谢
内部开发
浏览 1提问于2010-04-01得票数 1
我正在创建一个网站，在那里我有几个字体很棒的图标。我现在希望为每个图标创建一个带状背景。我怎么才能找到正确的像素大小的这种字体-可怕的图标？
浏览 0提问于2017-03-02得票数 1
回答已采纳
我在我的jhipster项目中安装了字体很棒
当我以这种方式导入字体时，我的图标就不会出现-
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />
但是如果我用这种方式导入字体，它们就会显示得很好
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css
浏览 4提问于2015-03-04得票数 5
回答已采纳
我见过字体很棒的图标对所有图标都有'fa‘类，如下所示：
<i class='fa fa-snapchat-ghost'></i>
为什么不简单地
<i class='fa-snapchat-ghost'></i>
？fa类为您提供了什么？
浏览 0提问于2016-07-08得票数 0
我使用了搜索图标的字体很棒的fa- search，它适用于所有的浏览器，所有的安卓手机，但不是在mac和iPhone。我无法在所有与苹果相关的设备和浏览器中点击图标。
在浏览器中也没有控制台错误，在iPhone中我无法点击它。提前感谢！
<div class="input-group">
<input type="text" id="searchMobile" class="form-control" placeholder="Search by Artist / Keyword" tabin
浏览 16提问于2019-07-15得票数 0
1回答
混叠字体类
、、、
如何正确地将Alisas作为一个字体出色的类，例如fa fa-users到user？
我正在开发一个Ext应用程序，我需要使用字体很棒的图标，下面这些都适合我：
<i class="fa fa-users"></i>
但是要使用的图标是数据库结果驱动的，因此我希望为fa fa-users使用别名类，然后我可以动态地切换类。我该怎么做。
已试过：
方法1
CSS：
.user
{
font-family: FontAwesome;
content: "\f095";
}
方法2
别名类的Jquery方法
$document.read
浏览 1提问于2016-05-09得票数 3
我想在属性标题的基础上添加名称，因为链接没有显示文本，而是使用了字体很棒的图标。
我的链接是这样的：
<a itemprop="url" href="whatever.html">
<i class="fa fa-home" title="Home"></i>
</a>
我需要没有javascript的解决方案
浏览 1提问于2016-05-09得票数 1
回答已采纳
我是第一次接触字体--很棒的图标。我有一个页面，其中有一个过滤器，用户可以搜索数据。我已经在搜索链接前添加了一个令人敬畏的字体图标(根据下面的截图)，我可以在除了IE 11之外的所有浏览器中看到这个图标。有趣的是，我在其他页面上也有这个图标，我可以在IE 11中看到它，但我不能在这个页面上看到这个图标(根据下面的截图)。
以下是IE 11的截图：
这是chrome的截图：
有人能帮我解决这个问题吗？
浏览 1提问于2015-07-08得票数 22
我们在Wordpress上使用Avada主题，打开WP超级缓存，并在wordpress后端使用所有有关CDN的正确设置。但是这个图标(字体很棒吗？)字体无法工作，只有在关闭缓存或关闭cdn启用时才能工作。除此之外，我们只是得到了一个广场，那里应该有twitter图标，facebook图标等等。
我们尝试过的..。
S3上的CORS设置
在nginx conf文件中打开CORS设置。
检查网络，我们看到字体文件正在从CDN加载，没有错误。
检查css文件，并看到它有一个相对路径，但是由于字体文件是通过developer tools上的Network选项卡加载的，所以请注意这不是问
浏览 4提问于2016-10-11得票数 1
回答已采纳
我想使用此示例中所示的船舶字体棒极了图标
然而，现在它们显示在下面的图标
让我知道如果有任何方法来显示旧的字体很棒的图标。
浏览 12提问于2019-11-29得票数 1
我有个案子。我需要图标内的文字字体，以便它正确包装。我能做到这一点的唯一方法是，如果我在文本和图标之间使用 (我用字体很棒的字体来标记)，问题是在加载字体之前，图标的宽度是0px。它破坏了我用JavaScript编写的布局。它计算包装器元素的大小。
对于我的例子，我有一个带有粘性标题和粘性前两列的表格，所以我有4个表格，我需要匹配每个表格中的单元格的大小，标题中的列在文本之后有像这样的(?)图标。文本需要换行，但图标在行中不能是孤单的。所以我使用 和图标作为内联元素，内联块不与文本对齐，所以我有时会得到单行和图标在末尾。
我不能使用flex或table，因
浏览 8提问于2019-11-15得票数 0
回答已采纳
2回答
我找到了这个图标：
我想知道是否可以在这个图标上放置文本。基本上，我要寻找的是一个具有动态颜色和文本的图标。基于图像和文本动态生成图标的简单PHP脚本也是很棒的。
浏览 4提问于2015-09-18得票数 0
由于某些原因，每当我在锚点内创建一个很棒的字体图标时，它就会变成蓝色，而且我无法通过css正常禁用它：
a {
text-decoration:none;
}
这是一个指向代码的链接，你可以在页脚看到github图标是蓝色的：
浏览 0提问于2015-08-06得票数 4
3回答
活动中的自定义标题图标
、、、
我需要动态设置标题栏中的图标。目前，我的活动中有以下代码：
requestWindowFeature(Window.FEATURE_LEFT_ICON);
setContentView(R.layout.table_layout_activity);
getWindow().setFeatureDrawableResource(Window.FEATURE_LEFT_ICON, R.drawable.icon_procedure);
这很好，只是它改变了字体大小，并移除了栏底部的(默认)边框。我只想设置图标，并将其他一切保留为默认设置。
默认标题栏：
。
自定义图标：
。
有人能帮
浏览 5提问于2013-08-25得票数 0
回答已采纳
Button标签的icon属性为Button添加了一个字体很棒的文件夹图标。是否可以将堆叠的图标添加到按钮？对于新文件夹，我需要堆叠文件夹和加号图标，并将其添加到按钮？
<b:Button addStyleNames="pull-right {style.new-folder}"
type="SUCCESS" ui:field="createDataRoom" icon="FOLDER"></b:Button>
浏览 4提问于2015-10-25得票数 1
1回答
我创建了一个定制的矢量字体，并试图在一些字体不适合的地方使用它。然而，字体图标并不像字体一样显示属性。CSS似乎是准确的，但我不知道是什么导致了这个问题。下面你会看到自定义图标圈，而其他的字体很棒。这个图标就不会像字体中的图标那样中心。
您可以在这个页面上找到这个标记：
HTML看起来以<i>为中心，但是:before将实际的图标向上推高。
<i class="icon-ncaa icon-ebt-ncaa"></i>
浏览 4提问于2014-03-27得票数 2
回答已采纳
我正在尝试使用一个很棒的字体图标在一个小工具，是安装在一个客户网站上。可怕的字体图标在Safari和Chrome中可以正确显示，但在Firefox中不能。然而，当在我们的网站上预览它时，它仍然可以在Firefox中正确显示。这与Firefox如何跨域显示第三方字体有关吗？
任何想法都将不胜感激。谢谢。
注意:这是使用火狐V9或更高版本进行测试的。
浏览 0提问于2012-05-17得票数 12
3回答
我想添加图标，而不是文字“删除”的链接，以删除对象。我怎么发动汽车呢？我使用的是很棒的字体，所以图标的代码看起来像这样：
<i class="fa-trash-o"></i>
下面是来自rails的链接：
<%= link_to "Delete", p, method: :delete %>
浏览 1提问于2013-11-14得票数 0
1回答
因此，我想在一个新创建的li中添加一个字体--很棒的图标
单击时，我将创建一个新的li，它需要两个图标。
HTML：
<ul class="todo" id="todo">
</ul>
联署材料：
function addItemToDo() {
var list = document.getElementById('todo');
var itemName = document.getElementById('item').value;
var task = document.
浏览 1提问于2017-05-04得票数 0
回答已采纳
1回答
我正在尝试让一个丑陋的文件上传按钮看起来像一个漂亮的字体，很棒的图标。 这是我到目前为止所知道的： <div class="col-12 col-md-4">
<button type="button" class="btn btn-round mt-0 mb-0 uploadMediaTrigger" data-toggle="modal" data-target="#uploadMedia" rel="tooltip" data-placement="top&
浏览 17提问于2019-01-10得票数 0
我已经在wordpress 5.5.1中使用contat form7和Elementor创建了一个表单。在这里，我得到一个问题字体可怕的图标没有加载。如需参考，请参阅以下网址
http://3.6.131.50/dentist-near-me/
我们在WordPress5.4.2中开发了相同的格式，这里的字体很棒，图标是loading.For参考的，请找到下面的url https://jasdental.in/dentist-near-me/(Due来服务器发布，需要很长时间才能加载，抱歉，不方便)，请找到附件中的图片。
📷
📷
浏览 0提问于2020-10-13得票数 0
3回答
我有一个类似于的问题，我想在我的提交按钮和一个文本中放置一个很棒的字体图标，它看起来是这样的：
我输入的提交值的内容是Buy now 
这个图标是可见的，因为我在输入字段font-family: FontAwesome;上设置了我的问题是，如何在按钮标准字体系列中设置我的文本？
浏览 0提问于2015-02-03得票数 33
回答已采纳
2回答
如何在输入占位符中添加字形图标？
、、、、
请参阅-
<div class="right-inner-addon ">
<input type="search"
class="form-control"
placeholder="" />
</div>
我希望字形图标在输入文本框中显示为占位符。但它不会渲染。就像我放了一个很棒的字体图标的十六进制代码一样，它呈现出来。
如何让它在字形图标中工作(不需要引入任何新的标记，如span或我只是为了显示图标，如
<i class=
浏览 2提问于2017-02-27得票数 1
2回答
我想使用这个图标的字体很棒，如下所示：
<i class="fa fa-user" aria-hidden="true"></i>
但是如果我包含了一个很棒的字体，由于某些原因，我使用的另一种字体会有问题，而且加载时间也会变慢。所以我只想使用实际fa fa-user的代码，所以我不需要只为一个图标导入所有这些！
我试着想办法解决这个问题，但是我做不到？这样做是可能的吗？
浏览 0提问于2016-10-12得票数 3
我想使用一些从字体可怕的图标，而不是谷歌的材料图标，但字体可怕的图标没有正确地排列在一个链接集合。
<div class="col s12 m4 l3 xl2">
<div class="collection with-header white">
<h6 class="collection-header"><i class=" material-icons left">insert_link</i>Links</h6>
<!-- F
浏览 3提问于2018-01-28得票数 1
回答已采纳
2回答
我正在使用DataTables，为了使用分页按钮的图标，我使用的字体很棒。我下载了这个文件，有两个文件
1-字体-令人敬畏的2-字体-awesome.min
我需要在css中添加哪一个才能得到前面的图标，以及是否需要添加任何其他文件。
目前，我链接font-awesome.min.css，但在我的分页中看不到按钮图标
谢谢
浏览 2提问于2017-07-08得票数 0
回答已采纳
我的网站上有一个列表，每个列表项都有一个唯一的类名。现在，我想为每个类分配一个特定的字体--很棒的图标。下面是我的html： <ul>
<li class="item-1"></li>
<li class="item-2"></li>
<li class="item-3"></li>
<li class="item-4"></li>
</ul> 我想要做的是使用javascrip
浏览 22提问于2019-05-29得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
