开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何用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）提供了丰富的图标资源供开发者使用，可以根据需要选择合适的图标进行应用。

相关搜索:React图标动态生成字体很棒的组件 Reactjs -如何给ref添加一个字体--很棒的图标字体很棒的图标只是一个正方形创建一个带有字体的响应卡-很棒的图标如何在haml表单提交按钮中添加一个很棒的字体图标制作一个很棒的字体徽章，就像图标组合尝试在JS中创建一个很棒的图标字体如何使用javascript和html动态添加字体图标到按钮？我正在尝试使用一个很棒的字体图标作为按钮如何在启动按钮中添加一个很棒的图标在切换的按钮上应用一个字体很棒的图标在css中的图像上叠加一个字体很棒的图标如何在Vue.js中动态添加优秀的字体图标如何将字体图标添加到JavaScript函数中的按钮如何在mat-label上显示matTooltip，在mat-form-field中有一个很棒的字体图标如何让一个字体很棒(喜欢/不喜欢)的图标可以用回车键点击？为什么我的span标签上有一个字体很棒的图标，受到垂直边距的影响？你能在一个选择器上已经有::before类的before上放置一个很棒的字体图标吗？我可以在一个三角形的div中放置一个字体很棒的图标吗？如何用javascript向数据库中的动态表添加不同的列

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

JavaScript进阶-02

构造函数是专门用于创建对象的函数，如果一个函数使用 new 关键字调用，那么这个函数就是构造函数。

03

WEB开发中40+高质量的免费资源【多图但值得一看】

对开发者来说，资源非常重要，因为在编码的时候可以提高很大程度上提高生产力。通过几个月，我收集到了一些链接，然后我很乐意跟大家分享其中部分。希望它们对你有所帮助。废话少说，这里提供了很棒的免费且最新的资源。

03

Font屌：中文图标字体（并支持SVG格式）

最近入手高清版的 MacBook Pro 之后，开始研究高清屏下一些图标怎么去展示的问题，一通瞎搜索，发现最好的方式是使用字体图标。国外这方面的资源很多，而国内图标字体非常少，今天终于找到一个中文字图标：Font屌（对于这个名字，各位自行评价吧...）。

02

【译】推荐的十个CSS动画库

你可以选择你喜欢的动画类型（比如：进入/退出），此外你也可以选择特定的一种（比如：scale-in），甚至，你可以为该动画选择不同的变化（比如：scale-in-right）。

01

推荐的十个CSS动画库

你可以选择你喜欢的动画类型（比如：进入/退出），此外你也可以选择特定的一种（比如：scale-in），甚至，你可以为该动画选择不同的变化（比如：scale-in-right）。

03

富文本打字机效果

打字机效果也就是让文字逐个在屏幕中显示，直到把整段话说完，常常被应用到人物对话，角色旁白以及引导教程等高频场景中。

03

超硬核 Web 前端学霸笔记，学完就去找工作！

文章和教程 Vue 学习笔记 Node 学习笔记 React 学习笔记 Angular 学习笔记 RequireJS 学习笔记 Webpack 学习笔记 Gulp 学习笔记 Python 学习笔记 Egret 引擎学习笔记流处理，TCP 和 UDP，WebRTC 和 Blob 学习笔记博客前端回忆录 | 前端笔记本 - 一个前端博主记录的心得和总结 Hasnode - Hashnode 是在您的个人域 free 上免费创建开发者博客并通过我们的全球开发者社区与读者联系的最简单方法！ 👩‍💻👨‍💻 De

02

提高 JavaScript 开发效率的高级 VSCode 扩展之二！

作为一名业余爱好者、专业人员，甚至是每月只有一次编程的开发人员，你必须知道，对于任何愿意在工作中投入最大生产时间的人来说，拥有智能和敏捷的工具是至关重要的，废话不多说，介绍插件比较重要。

03

28 个提升开发幸福度的 VsCode 插件

Quokka.js 是一个用于 JavaScript 和 TypeScript 的实时运行代码平台。这意味着它会实时运行你输入后的代码，并在编辑器中显示各种执行结果，建议亲自尝试一下。

03

前端原生开发解决方案

从 2012 年开始，H5 成为 html 最后一个稳定版本，不再兼容之前的 API，从此诞生的每一个新 API，一旦结束试验期将永远存在，2015 年 ES6 的出现又淘汰掉一堆 JavaScript 框架，再结合 CSS3，前端原生 API 已经可以替代任何脚手架和打包工具，本文介绍使用原生代码替代前端流行框架的解决方案：分析框架提供的每一个特性以及相对应的原生替代品。

03

为什么说js是动态类型语言呢？

JavaScript 被称为动态类型语言，是因为它的类型在运行时决定，并且可以在运行时动态改变变量的类型。以下是一些示例来说明 JavaScript 的动态类型特性：

01

101种让你的网站更棒的方法

上周我和一个老客户聊天，她和我说，“Nick，我觉得我的网站需要改进，但是我却不确定到底需要做什么”。

04

Material Design整理（八）——TabLayout

一般我们的app主界面都是界面下方或者上方有指示器，结合ViewPager或者Fragment来实现。而指示器可以是RadioGroup或者是其他简单的View（如TextView），但复杂的业务逻辑需要我们自己控制，还有过度动画也需要自己实现。

01

图标字体应用实践

使用的时候，通过background-position调整显示的位置，如下图所示：

02

在网站或桌面应用使用Font Awesome图标库

Font Awesome介绍 Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。一个字库，675个图标仅一个Font Awesome字库，就包含了与网页相关的所有形象图标。无需依赖JavaScript Font Awesome完全不依赖JavaScript，因此无需担心兼容性。无限缩放无论在任何尺寸下，可缩放的矢量图形都会为您呈现出完美的图标。如言语一般自由 Font Awesome完全免费，哪

02

分享15个有用的，你可能还不知道的CSS小技巧，建议每个前端开发者都了解下

为了充分利用这篇文章，我建议你打开一个CodePen或CodeSandbox的选项卡，这样你在阅读文章的同时可以随时调试代码。

04

for循环去掉最后一个逗号(三种方法)

案例：输入两个数求n到m之间的偶数需求：去掉最后一个逗号 📷 代码： // 导包 import java.util.Scanner; // 声明一个类名为Test_03的类 public class Test_03 { // main方法程序入口 public static void main(String[] args) { // 调用print()方法 print(); } public static void print()

02

别忘了前端是靠什么起家的

前端开发的核心构建在三大基石技术上：HTML、CSS和JavaScript。回想起多年前，前端开发者常被戏称为“切图仔”，但就是这样的角色，通过精湛的CSS技巧，能够实现各种复杂的交互和特效，展现出前所未有的网页魔法。这是那些专注于服务端开发的工程师所难以企及的领域。

01

30 个极大提高开发效率超级实用的 VSCode 插件

Visual Studio Code 的插件对于在提升编程效率和加快工作速度非常重要。这里有 30 个最受欢迎的 VSCode 插件，它们将使你成为更高效的搬砖摸鱼大师。这些插件主要适用于前端开发人员，但也有一些通用插件也可以适用于任何开发环境。以下是我将介绍的 VSCode 插件：

03

程序猿必备的10款web前端动画插件二

1.菜单悬停效果的展示一些菜单链接悬停效果为您的灵感。由CSS和JavaScript为单个字母动画提供支持。今天，我们希望与您分享一些菜单悬停效果。我们希望这一套启发你，并为你的下一个项目提供一些想

07

网站图标开发指南

图标是网站中非常友好的附加物，许多网站都会使用各种图标来美化页面样式，给用户提供更好的指引。本文将会和大家一起学习页面图标的发展历史，以及最优的解决方案。

03

FontAwesome基础知识

注意：fa前缀最新版本中已弃用。新的默认设置是实心的fas样式和品牌的fab样式。

01

解读新一代 Web 性能体验和质量指标

衡量一个 Web 页面的体验和质量一直有非常多的工具和指标 ... 每次我们去关注这些指标的时候都会非常痛苦，因为这些指标真的是又多又难理解，测量这些指标的工具也非常多。

03

用Python分析领导讲话，原来隐藏了 "这些" 重要信息......

如何用Python分析领导讲话呢？正好庆祝中国共产党成立100周年大会，7月1日上午在北京天安门广场隆重举行。中共中央总书记、国家主席、中央军委主席习近平发表重要讲话。

02

JS学习系列 02 - 词法作用域

“作用域”我们知道是一套规则，用来管理引擎如何在当前作用域以及嵌套的子作用域中根据标识符名称进行变量查找。

03

用 Python 分析领导讲话，原来隐藏了 "这些" 重要信息......

如何用 Python 分析领导讲话呢？正好庆祝中国共产党成立 100 周年大会，7 月 1 日上午在北京天安门广场隆重举行。中共中央总书记、国家主席、中央军委主席习近平发表重要讲话。

02

使用TabLayout看这篇就够了

TabLayout提供了一个水平的布局用来展示Tabs，很多应用都有这样的设计，典型的有网易新闻，简书，知乎等。TabLayout就可以很好的完成这一职责，当然也或许各家应用的实现方式不尽相同，这里介绍下TabLayout的用法。

03

3ds Max: 自定义工具架

在我2015年刚加入PIXOMONDO北京的时候，那时候PXO还是3ds Max的流程, 里面有很多很棒的工具其中就有个Carlos Anguiano 用Maxscript写的SuperShelves吸引到了我, 去年我机缘巧合加入了网易游戏这边大多以3ds Max为主，想到未来需要帮美术们快速部署工具就索性花了几个小时借鉴了SuperShelves的逻辑写了一个纯python的版本出来，今天在这里就是向大家分享这个小工具，如果你是TA/TD需要在3ds Max中快速部署你的小工具小脚本分享给项目组中的人使用这个十分方便了

02

jQuery基础

使用jQuery时， $ 是访问jQuery的标志，但是如果有其他方法与jQuery中的 $冲突时，可以释放$的使用权，还可以自定义一个符号来代替 $使用。

02

新一代 Web 预渲染技术！

很好理解，就是当我们还没有访问页面是提前对页面进行渲染，等到我们真正访问页面时就不需要再花费额外的时间去渲染页面了。

02

小图标，大学问

图标虽小，里面的门道可一点都不少。甚至可以说，图标的演化是 Web 技术演化的一个缩影。本文将带你回顾一下图标简史，了解一下图标技术的来龙去脉。

01

从零开始学 Web 之 CSS3（六）动画animation，Web字体

好的前端工程师，会更注重用户的体验和交互。那么动画就是将我们的静态页面，变成具有灵动性，为我们的界面添加个性的一种方式。

01

【H5 音乐播放实例】第一节音乐详情页制作（1）

本教程是一个H5音乐播放的详情页制作，实现了H5音乐播放，音轨的跳动，已经较为酷炫的UI界面。通过本教程，您会学到： 1、H5音乐播放（带音轨） 2、iconfont字体图标库 3、div+css

07

Intellij IDEA 竟然把 Java8 的数据流问题这么完美的解决掉了！

Java8在2014年三月发布了。我们打算将Pondus的所有生产服务器升级到这一新版本。从那时起，我们将大部分代码库迁移到lambda表达式、数据流和新的日期API上。我们也会使用Nashorn来把我们的应用中运行时发生改变的部分变成动态脚本。

05

IDEA Java8 的数据流问题，用过都说好！

相信不少小伙伴的 Lambda 使用的贼 666，今儿来看看 IDEA 在这方面的助力！ 1IDEA在手天下我有

03

「聊设计模式」之装饰器模式（Decorator）

🏆本文收录于《聊设计模式》专栏，专门攻坚指数级提升，助你一臂之力，带你早日登顶🚀，欢迎持续关注&&收藏&&订阅！

07

全网最全的，最详细的，最友好的 Typescript 新手教程

全网最全的，最详细的，最友好的 Typescript 新手教程，拿走不谢，希望给个点赞，在看，转发，谢谢

04

我如何调优了令人抓狂的首字节传输时间 (TTFB)

绝招！我仅靠改善一个指标就提升了首页的核心网页生命力指标，你知道是什么指标吗？没错，正是首字节传输时间 (TTFB)！通过两处微调数据抓取的方式，我成功地将 p75 TTFB 从令人抓狂的 3.46 秒降低到仅仅 704 毫秒。在这篇文章中，我将分享我是如何发现问题的，如何修复问题，以及在此过程中做出的重要决策。（别担心，我也会解释一下 “p75” 和 “TTFB” 的意思！）

01

LVGL的多语言转换工具--MCU_Font_Release

「重要提示：为了支持多国语言，目前本软件使用 UTF-8 编码读取源程序，如果你的源程序文件为 GB2312 或其他编码则请转为 UTF-8编码。可以使用 notepad++ 转为 UTF-8 编码，但 keil 编辑器的编码可以任然使用 GB2312。」

02

面试官：你是如何对前端项目进行优化的？

面试官：你认为前端工作中最重要的是什么？答：用户体验！面试官：如何可以提升用户体验？答：从提升项目性能开始！面试官：如何才能提升项目性能呢？答：对项目进行优化! 面试官：如何对项目进行优化？答：主要从项目加载时以及运行时两方面进行优化。面试官：如何进行加载时的优化？答：主要从以下几方面入手： CSS 写头部，JavaScript 写底部：所有放在 head 标签里的 CSS 和 JS 文件都会堵塞渲染。如果这些 CSS 和 JS 需要加载和解析很久的话，那么页面就会空白了，所以 JS 文件要

02

实战案例：初探工程配置 & 图标组件热身

本文是基于Vite+AntDesignVue打造业务组件库[1] 专栏第 3 篇文章【实战案例：初探工程配置 & 图标组件热身】，我将从业务系统中最基础的图标组件入手，带着读者们练练手找找感觉，快速进入开发状态，顺便了解一些基本的前端工程配置。

02

C#常用 API函数大全[通俗易懂]

WNetAddConnection 创建同一个网络资源的永久性连接 WNetAddConnection2 创建同一个网络资源的连接 WNetAddConnection3 创建同一个网络资源的连接 WNetCancelConnection 结束一个网络连接 WNetCancelConnection2 结束一个网络连接 WNetCloseEnum 结束一次枚举操作 WNetConnectionDialog 启动一个标准对话框，以便建立同网络资源的连接 WNetDisconnectDialog 启动一个标准对话框，以便断开同网络资源的连接 WNetEnumResource 枚举网络资源 WNetGetConnection 获取本地或已连接的一个资源的网络名称 WNetGetLastError 获取网络错误的扩展错误信息 WNetGetUniversalName 获取网络中一个文件的远程名称以及/或者UNC（统一命名规范）名称 WNetGetUser 获取一个网络资源用以连接的名字 WNetOpenEnum 启动对网络资源进行枚举的过程

04

Fonts最佳实践

本文分为三个部分：字体加载、字体交付和字体呈现。每一节都解释了字体生命周期的那个特定方面是如何工作的，并提供了相应的最佳实践。

07

前端调试必备：CHROME CONSOLE控制台的使用：诊断并记录

chrome console控制台日志记录是检查您的页面或应用程序的功能的强大方法。我们从console.log（）开始，探索其他高级用法。这篇文章主要讲以下几个内容：使用log（）进行基本的日志记录使用error（）和console.warn（）来引人注目的东西使用group（）和console.groupEnd（）来分组相关消息，避免混乱使用assert（）显示条件错误消息写入控制台console 使用console.log（）方法进行任何基本的日志记录到控制台。它将一个或多个表达式作为

不美翻怎么开发!Ubuntu 16.04 LTS深度美化!(2017年度定稿版)

前言本篇尝试对ubuntu 16.04 LTS进行美化和优化, 基本上就是本人长期使用的经验分享, 如有不足, 欢迎指正交流! 简单说下版本选择的原因, 没有去选择最新的版本, 而是选择了最新的长期支持版本, 也就是LTS. 但事实上, 如果你使用其它ubuntu版本, 整体处理也是大同小异. 多图预警, 然后转载请注明出处. 更新了终端美化, 让你的终端飞起来. 更新了超棒的主题和图标包. 更新了终端美化细节和其它细节. 重新整理编辑了整篇文章. ---- 外观美化主题主题推荐一: flat

05

Android webView打开网页

这个就比较简单了，直接拖一个控件，再加载一下url，记得在AndroidManifest.xml中加一下权限

02

小程序实践：基础内容icon，关于图标的5个实现方案等

使用图片也可以达到同样的效果，但是图片如果像素不够，放大了之后效果会虚；还有，图片需要另外存储与加载，使用起来不如图标只使用一个名称方便；再者就是，接下来会看到，图标可以随意改变颜色，而图像不能。

00

【动画进阶】类 ChatGpt 多行文本打字效果

这个效果其实本身并非特别困难，实现的方式也很多，在本文中，我们更多的会聚焦于整个多行打字效果最后的动态光标的实现。

01

创建华丽 UI 的 7条规则第二部分 (2019年更新)

如果想成为一名优秀的 UI 设计师，必须学会如何以一种吸引人的方式将文本放置于图像之上。每个优秀的 UI 设计师在这个方面都能做得很好，相反的糟糕的 UI 设计师都处理的很差，或者根本不处理。不管你是优秀还是平庸的设计师，阅读这篇文章后，多多少少对你都有帮助。

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭