开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何从JS文件中动态添加字体awesome图标？

从JS文件中动态添加字体awesome图标可以通过以下步骤实现：

首先，确保已经引入了字体awesome的CSS文件和字体文件。可以在HTML文件中通过<link>标签引入CSS文件，例如：

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

同时，确保字体文件（通常是以.ttf、.eot、.woff等格式）也在相应的路径下。

在JS文件中，创建一个新的<i>元素，用于显示字体awesome图标。可以使用document.createElement()方法创建元素，例如：

var icon = document.createElement('i');

为新创建的<i>元素添加相应的class，以显示特定的字体awesome图标。可以使用classList.add()方法添加class，例如：

icon.classList.add('fa', 'fa-star');

其中，fa是字体awesome的基础class，fa-star表示具体的图标。

将新创建的<i>元素插入到HTML文档中的目标位置。可以使用appendChild()方法将元素添加到指定的父元素中，例如：

document.body.appendChild(icon);

这里将<i>元素添加到<body>元素中，可以根据实际需求选择其他父元素。

通过以上步骤，就可以从JS文件中动态添加字体awesome图标。需要注意的是，字体awesome图标的显示样式可以通过CSS进行进一步的调整，例如修改颜色、大小等。

推荐的腾讯云相关产品：腾讯云云开发（Tencent Cloud CloudBase），它是一款支持前后端一体化开发的云原生应用开发平台。腾讯云云开发提供了丰富的云端资源和工具，可以方便地进行前端开发、后端开发、数据库管理等操作。您可以通过以下链接了解更多信息：腾讯云云开发

相关搜索:如何根据数据动态添加字体图标如何在Vue.js中动态添加优秀的字体图标如何使用javascript和html动态添加字体图标到按钮？React-Bootstrap / Panel / Font Awesome -如何在面板的页眉中显示字体强大的图标如何从google字体中添加自定义字体？如何用javascript动态添加一个字体很棒的图标？如何添加图标字体:标题导航标签引导vue.js？如何在活动管理菜单中添加字体可怕的图标如何在Objective C中的NSArray中添加字体棒图标从单独的js文件中导出图片和字体很棒的图标如何在我默认的bootstrap carousel中添加Font Awesome fa-angle-right图标？如何在Next.js中动态加载图标？如何从xml文件动态添加视图,我想在RelativeLayout中添加TableRow 如何在swift中将图标从kml文件添加到mapkit中如何为google app script html文件中的字体大小和字体类型在html中添加预览或动态选择字体如何向rails中的Form_Tag添加类和字体图标如何将字体图标添加到JavaScript函数中的按钮我是否必须从导入和添加到库中重新列出我所有的React Font Awesome图标？如何在reactjs中从JSON数据中获取字体很棒的图标？如何从Java向Android中的按钮添加图标？

相关搜索:

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

有帮助

没帮助

相关·内容

Hexo博客 | 博客中能用到的代码（一）

这篇文章介绍了如何使用font awesome图标字体库，使用动态图标，添加网页运行时间，全站变黑白，鼠标点击特效，网页标题的动态效果，网页樱花特效，鼠标触动音乐特效，之前还介绍过打字机效果，可以看看这篇文章

02

FontAwesome基础知识

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

01

Asp.net+Vue2构建简单记账WebApp之四（vue.js构建记账主页面）

一、安装我们所需要的一些库 cnpm install mint-ui -S // 安装mint-ui库，ui库，cnmp是按照淘宝镜像后的用法，用法和npm一样。-s是将库添加到项目的packag

03

Vue + Element UI 实现权限管理系统前端篇（十一）

用过Elment的同鞋都知道，Element UI提供的字体图符少之又少，实在是不够用啊，幸好现在有不少丰富的第三方图标库可用，引入也不会很麻烦。

04

Vue项目中优雅使用icon

icon在我们前端日常开发中是很常用的，它有很多种使用方式，时至今日，它的使用方式经过了很多种演变，本文会为大家介绍icon的一些历史演变，分析一下这几种使用方式的优劣，我们将采用svg sprites这种方式使用icon，演示代码使用vue+vue-cli3+，看完之后，你会发现这种使用方式完全称得上优雅二字

02

Font Awesome 一套绝佳的图标字体库和CSS框架

在bootstrap框架的使用中，字体图标必不可少，Font Awesome 一套绝佳的图标字体库和CSS框架，值得学习。网址：http://fontawesome.dashgame.com/

03

Hexo相关

把下载好的Js文件放在theme/Butterfly/source/js文件夹下 /Butterfly/layout/includes文件夹下找到head.pug文件，在最后引入

02

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

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

03

网站设置彩色图标（通用）

目前大多数博客网站图标都是使用Font Awesome图标库里的图标，本站刚开始也使用了原生的图标，很多网站里面都集成了Font Awesome，使用奥森图标有很多优点，用图标代替图片，加载快，使用灵活。

02

WordPress导航菜单图标字体插件font awesome 4 menus纯代码版

换成 Begin 主题之后，大伙都不约而同的给菜单用上了图标字体，确实给博客带来了一定的美化效果。与之配套的是 font awesome 4 menus 这个图标字体插件，其实还是挺小巧的。不过，

05

基于Metronic的Bootstrap开发框架经验总结（4）--Bootstrap图标的提取和利用

在前面的一篇随笔《基于Metronic的Bootstrap开发框架经验总结（1）-框架总览及菜单模块的处理》介绍了菜单模块的处理，主要介绍如何动态从数据库里面获取记录并构建菜单列表。其中菜单信息的图标样式，也是从数据库里面获取的，因此要求我们能够动态取得Bootstrap里面的各种图标定义了。本篇主要介绍如何提取Bootstrap的图标信息，存储到数据库里面为我所用。 1、菜单的显示及各种Bootstrap图标我们从下图可以看到，为了菜单的美观，每个菜单项（这里分了三级菜单）都有一个图标，虽然大小不同，我

GitHub 上的顶级项目都是做什么的？（一）

前一阵看到同事在用一个名叫 AirFlow 的工具，而我竟然素未耳闻，一番搜索之后发现这个工具是 Apache 的顶级项目，而且在 GitHub 上有 1w+ 的 Star。震惊之余，感觉有必要把 GitHub 上常用工具捋一遍，以避免以后发生重复造轮子的情况。计划是把 GitHub 上 5k+ Star 的项目都知道是做什么用的，每周看 50 个，数据来源是这里：https://gitstar-ranking.com/repositories。

02

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

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

02

GitHub 上的顶级项目都是做什么的？

前一阵看到同事在用一个名叫 AirFlow 的工具，而我竟然素未耳闻，一番搜索之后发现这个工具是 Apache 的顶级项目，而且在 GitHub 上有 1w+ 的 Star。

01

get几个小技能：图标库使用技巧，css3文本小技巧

目前自己常用的图标库有两种： 1. 插件、库里面自带的图标库：如 * boostrap * element ui * vant * layui * H-ui * mui 等等这些ui框架官方文档上都有详细的介绍使用说明 2. 常用图标库 * Font Awesome图标库 * iconfont 阿里图标库这些图标库虽然官网都有介绍，但是使用起来并不需要像导入插件、库那样麻烦。下面就来说一下我今天get的小技巧。

02

jQuery 图片查看插件 Magnify 开发简介（仿 Windows 照片查看器）

前言因为一些特殊的业务需求，经过一个多月的蛰伏及思考，我开发了这款 jQuery 图片查看器插件 Magnify，它实现了 Windows 照片查看器的所有功能，比如模态窗的拖拽、调整大小、最大化，图片的缩放、旋转，平移、键盘控制等。插件的样式都是最基础的 CSS，定制非常容易，可以轻松修改成自己喜欢的样式。随后会陆续发布 React 及 Vue 相关版本的插件。本文主要介绍插件的特点及使用方法，而关于插件开发的细节将会在之后的具体文章中说明。 Github: https://github.com/

09

更改形状和背景色、自定义风格、颜色流动…这款词云工具都能做到

stylecloud 是一个 Python 包，它基于流行的 word_cloud 包，并添加了一些有用的功能，从而创建出独特的词云。stylecloud 具备以下特点：

01

20多个好用的 Vue 组件库，请查收！

Vue Tables 2旨在为开发者提供一个功能齐全的工具集，以便用 Vue 创建漂亮而实用的数据表格。数百个商业软件应用正在使用它。此外，Vue Tables 2正在不断成长、改进，同时也在获得新的功能。

01

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

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

02

20 多个好用的 Vue 组件库

地址：https://github.com/matfish2/vue-tables-2

01

分享八个免费的Vue图标库，轻松修饰你的应用

图标，是能够吸引访问者注意力并提供更好的感官的好方法。随着Vue的兴起，更多的Vue库正在兴起，以下就为大家推荐几个Vue的图标库。

02

如何应用Font Awesome矢量字体图标

本文介绍了如何使用Font Awesome图标字体库在网页中添加社交网络图标、Web应用程序图标和编辑器图标等，同时介绍了如何结合Bootstrap框架提高用户体验。

06

hexo 插件及 next 内置样式集

First add configuration in _config.yml from your hexo project.

01

网站性能优化(一)减少HTTP请求数量

当然，HTTP 1.1 中已经支持了持久连接-keep-alive，即一个TPC/IP连接中，可以连续发起多次HTTP请求。随后，采用“管线化”技术，能够做到同时并行发送多个HTTP请求，而不需要一个接一个等待响应（Chrome目前支持在一个域名domain下，同时发起6个并行的HTTP请求）。尽管这样，为了进一步提高网站性能，还是需要考虑如何有效的减少HTTP请求数量。

03

04-移动端开发教程-在线字体

在IE4开始微软就已经开始支持在线字体，不过没有流行起来，直到CSS3新增加了font-face模块，正式纳入了web开发的标准。也渐渐流行起来而且发掘了很多其他应用。 1. 为什么要用在线字体问题精灵图（雪碧图）用作背景的时候不能轻易的放大缩小。低质量的位图在高清设备上放大后会有难看的锯齿，无法满足响应式页面的开发需求在线字体带来的革命：在线字体本质就是文字，但是也可是像图形的文字。节省了带宽（相比图片）字体文件大小也不大（一般几百k）。在线字体本身是矢量的，放大缩小都不会失真可以灵活的通过

06

ASP.NET MVC5+EF6+EasyUI 后台管理系统（52）-美化EasyUI皮肤和图标

我很久以前就想更新系统的皮肤功能，Easyui 自带的皮肤已经无法满足客户的审美。皮肤颜色来源于AdminLTE系统。我的颜色全部都这里取的。，所以一共取了11个颜色。1个皮肤=2个banner颜色

05

Ways to Use Icons on Android (1)

最近对IconFont特别感兴趣，通过使用IconFont一些常见的制作精良的小图标就可以直接在代码中非常方便的使用，免去了找图标并添加到项目中的很多麻烦。本系列估计也会有三篇文章，结合实践分享下我的摸索过程，也许大家会觉得有用呢。本节主要从Material Design图标入手，介绍它的几种使用姿势。

02

字体图标

图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。我们后面会学习移动端响应式，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术出现了，这就是字体图标（iconfont).

02

04-移动端开发教程-在线字体图标

本文主要介绍了在移动端网页开发中，如何利用web font和自定义字体实现字体图标。首先介绍了字体图标的原理和分类，然后介绍了如何在移动端网页中使用字体图标。最后列举了几个常用的字体图标工具，以及如何在这些工具中使用自定义字体。

06

Font-Awesome如何引入矢量字体图标

💬个人网站：【芒果个人日志】 💬原文地址：Font-Awesome如何引入矢量字体图标 - 芒果个人日志 (wyz-math.cn) 💂作者简介： THUNDER王，一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读，同时任汉硕云（广东）科技有限公司ABAP开发顾问。在学习工作中，我通常使用偏后端的开发语言ABAP，SQL进行任务的完成，对SAP企业管理系统，SAP ABAP开发和数据库具有较深入的研究。 💅文章概要：在开发网页的过程中，我们

03

Hexo插件及Next内置样式集

First add configuration in _config.yml from your hexo project.

01

学习WPF——使用Font-Awesome图标字体

图标字体介绍在介绍图标字体之前，不得不介绍图标格式ICON ICON是一种图标格式，我们操作系统中各种应用程序都包含一个图标比如QQ程序的图标是一个可爱的企鹅，我的电脑是一个显示器图标 ---------------- 一个图标文件是扩展名为.ICO或者ICON的文件直到现在图标文件还是在计算机程序中随处可见但有时候需要在不失真的情况下放大图标因为ICON本身与JPEG\PNG格式的图形文件差异不大，也是非矢量图形所以图标文件就很难满足这种需求 ---------------

05

vue-html5-editor开发Vue富文本

该富文本的配置较多，所以单独建了个htmlEditor.js的文件夹然后引到main.js中去

01

前端开发中常用资源收集（网站小图标、css、js 框架等）

在日常开发中，我们经常会需要一些常用的资源，虽然很容易找到，但是有时候却发现又不是那么好找。子勰把一些常用的工具整理了一下，发表在这里，供大家参考，同时也备忘方便自己使用。几个超级酷炫的前端模板 N

05

Day8:html和css

display: none 为无，隐藏元素 display: block 为显示元素转换为块级元素

04

设置HEXO博客菜单图标

本文只介绍hexo怎么设置菜单图标，并不说明怎么安装Font Awesome字体(因为一般主题都已经带了)，如需了解的请自行百度。

01

写一款小众的 flutter 图标包

你需要做的第一件事就是找到一个包含 “.ttf” 文件的开源图标库。那 “.ttf” 是什么文件？

01

开发 | 想让小程序变得更漂亮？一招教你使用图标字体

图标字体，相信大家都不陌生。包括 font-awesome，iconic 等等，都是很不错的图标字体服务。

00

使用TabLayout看这篇就够了

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

03

web开发中插入FontAwesome 图标字体库

Font Awesome是一套绝佳的图标字体库和CSS框架，它是可缩放的矢量图标，用户可以可以对图标的特性进行更改，比如大小、颜色、阴影等并且可以组合不同的图标创造自己喜欢的图标。Font Awesome的产生，为网页设计和Web前端开发人员带来极大的方便

03

前端学习自学笔记：day06

今天是第六天的笔记,主要是HTML和CSS的,希望大家支持~ 在此之前先为大家显示下前端工程师的路线图: 第六天的笔记:HTML AND CSS: text-center class属性：文本居中：例：your text btn class属性：Bootstrap风格按钮：例：按钮 btn-block class属性:使其按钮填满水平空间：例：按钮注意：添加btn-block时，也需要btn class属性。 btn-primary class属性：深蓝色：例：按钮 btn-info cl

05

Qt编写地图综合应用15-添加删除清空重置点

在地图应用的相关项目中，在地图上标识一些设备点，并对点进行交互这个功能用的最多的，于是需要一套机制可以动态的添加、删除、清空、重置，重置的意思是将地图中的所有点的经纬度重新设置，其实就是先清空然后挨个重新添加所有点的信息，JS的异步交互功能非常强大，直接执行对应的JS函数就可以，没有必要刷新网页，最开始很多年前做的时候还不会JS，那时候想的最糟糕的办法就是写死在代码中，这样每次变动需要重新加载网页，后面发现那真是糟糕的办法，既然有异步刷新的办法为何不用呢，自从学会了JS异步刷新方法以后，索性将各种方法都改成了JS函数，传入对应的参数即可，参数尽可能的考虑到已知的各种各样的情况，方便用户自己添加。

00

ASP.NET MVC使用Bootstrap系列（1）——开始使用Bootstrap

作为一名Web开发者而言，如果不借助任何前端框架，从零开始使用HTML和CSS来构建友好的页面是非常困难的。特别是对于Windows Form的开发者而言，更是难上加难。正是由于这样的原因，Bootstrap诞生了。Twitter Bootstrap为开发者提供了丰富的CSS样式、组件、插件、响应式布局等。同时微软已经完全集成在ASP.NET MVC 模板中。 Bootstrap结构介绍你可以通过http://getbootstrap.com.来下载最新版本的Bootstrap。解压文件夹后，可以

Next.js 中的 SEO

Next.js 是一个用于构建服务器呈现的 React 应用程序的框架，使用像 Next.js 这样的框架的好处之一是它可以很容易地针对搜索引擎优化您的应用程序。

03

在Uni-app中使用自定义图标

1：使用矢量图标字体: 矢量图标字体库，如Font Awesome、Material Icons等。将矢量图标字体文件（通常是.ttf或.otf格式）添加到项目中。需要使用图标的地方，使用相应的类名来渲染图标。

03

Vue-travel学习笔记

minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" 阻止用户手滑发大缩小页面

01

WordPress引用阿里巴巴矢量图标库添加彩色图标

现在大部分博客图标都采用Font Awesome图标库，因为Font Awesome图标库满足了大部分用户的需求了，但做为喜欢花里胡哨的我们是不够的，Font Awesome图标库的图标不仅没有彩色的图标，个性化的图标还有点少！所以对于我们喜欢彩色的菜单图标选择性很少！所以只能引入其他的矢量图标库，今天我就分享一下WordPress引用阿里巴巴矢量图标库的彩色图标。

03

Apriso 开发葵花宝典之四 CSS 篇

Process builder是Delmia Apriso中主要的业务流程管理工具，也是DELMIA更广泛的Apriso制造运营管理解决方案的核心应用程序，Process Builder允许使用屏幕流管理设计方法和实体（如项目、屏幕、布局、视图和操作（函数））创作用户界面和业务逻辑。该应用程序能够快速方便地管理和修改开发的设计，使您能够根据需要随时更改业务流程。由于增强了对可重用性的支持，以前开发的逻辑可以在新的设计中快速重用。

03

Custom Beautify

引入魔改样式的方法很简单，自建一个css文件，然后引入即可。以butterfly主题为例。可以在[Blogroot]\themes\butterfly\source\css\目录下新建custom.css文件，然后在[Blogroot]\_config.butterfly.yml的inject配置项中引入自定义样式文件。

02

一看就会的iconfont字体图标的使用方法--超简单!

我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐,自己弄明白后感觉如此简单,做了这么个简单教程,直接上图,简单粗暴,避免新手走弯路,这里讲解的默认是元素使用类名;

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭