开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

更改字体很棒的图标onclick功能

基础概念

在网页开发中，图标（Icon）通常用于表示某种功能或状态。通过为图标添加 onclick 事件，可以实现点击图标时触发特定的功能或操作。

相关优势

用户友好：图标直观，用户可以通过视觉快速识别功能。
交互性强：通过 onclick 事件，用户可以直接与图标进行交互，提升用户体验。
灵活性高：可以根据需求自定义图标和功能，满足不同的设计需求。

类型

静态图标：不可点击的图标，仅用于展示。
动态图标：可点击的图标，点击后会有相应的反馈或功能触发。

应用场景

导航菜单：点击图标切换页面或展开子菜单。
功能按钮：点击图标执行特定功能，如保存、删除、分享等。
状态指示：点击图标改变状态，如开关按钮、点赞按钮等。

示例代码

以下是一个简单的示例，展示如何为图标添加 onclick 事件来更改字体：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change Font Icon</title>
    <style>
        .icon {
            cursor: pointer;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <i class="icon" onclick="changeFont()">Aa</i>

    <script>
        function changeFont() {
            const icon = document.querySelector('.icon');
            icon.style.fontFamily = 'Arial';
            icon.innerHTML = 'Arial';
        }
    </script>
</body>
</html>

参考链接

MDN Web Docs: onclick Event

常见问题及解决方法

图标不响应点击事件：
- 确保图标元素上有 onclick 属性，并且属性值是一个有效的 JavaScript 函数。
- 检查是否有其他 CSS 样式或 JavaScript 代码阻止了事件的触发，如 pointer-events: none。

图标点击后功能未执行：
- 确保 JavaScript 函数定义正确，并且在全局作用域中可访问。
- 使用浏览器的开发者工具检查控制台是否有错误信息，可能是语法错误或引用错误。
图标样式问题：
- 确保图标元素的 CSS 样式正确应用，特别是 cursor 属性设置为 pointer，以提示用户该元素可点击。

通过以上步骤，您可以成功为图标添加 onclick 事件，并实现更改字体的功能。

相关搜索:旋转字体很棒的图标文本重叠字体很棒的图标不能给图标充电(很棒的字体)字体很棒的图标不会出现标签后面的字体很棒的图标堆叠多个字体很棒的图标字体-显示为方框的很棒的图标 React图标动态生成字体很棒的组件如何使用CSS隐藏字体-很棒的图标字体很棒的图标不显示angular 6 使用Bootstrap和字体的搜索栏很棒的图标字体如何使用jquery将按钮文本更改为字体很棒的图标带有laravel 5表单的字体很棒的图标字体-不改变颜色反应的很棒的图标字体onclick图标使用材料表更改角度为什么我的字体很棒的图标没有居中？堆叠字体很棒的图标与透明的中间？我的页面上没有显示字体很棒的图标字体-在文本区内不显示很棒的图标如何在占位符中设计字体很棒的图标？

相关搜索:

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

有帮助

没帮助

相关·内容

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

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

03

PPT进阶之路（二）附节日福利！！！

2017年末，课代表发表了一篇《PPT进阶之路（一）》，不过其中去广告的方法已经失效了，导致大家的体验并不是很好，现如今恰逢大家的节日，给大家带来一款体验更好的PPT插件，不但体验好！还没有广告！！！

03

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

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

02

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

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

03

每个前端开发者都应知道的25个实用网站

快来免费体验ChatGpt plus版本的，我们出的钱体验地址:https://chat.waixingyun.cn 可以加入网站底部技术群，一起找bug，另外新版作图神器已上线 https://cube.waixingyun.cn/home

04

JavaScript---网络编程(8)-DHTML技术演示(1)

DHTML技术使用的基本思路： 1. 用标签封装数据—html范畴 2. 定义样式—css范畴 3. 明确事件源、事件和要处理的节点—dom范畴 4. 明确具体的操作方式，其实就是事件的处理内容(过程)—js范畴

01

Flutter常见开发问题

Flutter 使用了一种全新的方法，您可以使用 widgets代替 Views 。Android 中的 View 主要是布局的一个元素，但在 Flutter 中，Widget 几乎就是一切。从按钮到布局结构的一切都是小部件。这里的优势在于可定制性。想象一下 Android 中的一个按钮。它具有文本等属性，可让您向按钮添加文本。但是 Flutter 中的按钮不是将标题作为字符串，而是另一个小部件。这意味着**在按钮内你可以有文本、图像、图标和几乎任何你可以想象的东西，**而不会打破布局限制。这也让您可以非常轻松地制作自定义小部件，而在 Android 中制作自定义视图是一件相当困难的事情。

02

html+原生js制作一个简易音乐播放器

下面这些按钮是导入了字体图标库font-awesome 4.7.0 ，需要自己引入

01

Flutter常见开发问题

Flutter 使用了一种全新的方法，您可以使用 widgets代替 Views 。Android 中的 View 主要是布局的一个元素，但在 Flutter 中，Widget 几乎就是一切。从按钮到布局结构的一切都是小部件。这里的优势在于可定制性。想象一下 Android 中的一个按钮。它具有文本等属性，可让您向按钮添加文本。但是 Flutter 中的按钮不是将标题作为字符串，而是另一个小部件。这意味着**在按钮内你可以有文本、图像、图标和几乎任何你可以想象的东西，**而不会打破布局限制。这也让您可以非常轻松地制作自定义小部件，而在 Android 中制作自定义视图是一件相当困难的事情。

03

钻芒博主首个汉化主题-Gliu – 创意WordPress博客主题

源自:https://elements.envato.com/gliu-creative-wordpress-blog-theme-ETK6QV2

02

Android | Compose 初上手

Jetpack Compose 是用于构建原生 Andorid 界面的新工具包，Compose 使用了更少的代码，强大的工具和直观的 Kotlin Api 简化并且加快了 Android 上界面的开发。

02

css更改鼠标指针样式，几种鼠标点击效果

平常，我们在浏览界面时，会发现鼠标的样式有所不同，鼠标的样式变化和cursor属性有关。cursor属性的几个关键字：default、pointer、wait、help、text、crosshair。

02

iNotify.js 2 实现浏览器的title闪烁滚动声音提示，弹出通知

JS 实现浏览器的 title 闪烁、滚动、声音提示、chrome、Firefox、Safari等系统弹出通知。它没有依赖，压缩只有只有4.66kb(gzipped: 1.70kb)，demo 实例预览。

05

更改分享功能的默认图标为自定义的图标

我们经常在网站上采用百度分享或者是jiathis分享功能，但是他提供了默认的图标，这些传统的图标看的久了就会感觉它不舒服，希望能够使自己网站的分享图标与众不同，下面我来介绍一下实现方法。

02

Android信息界面编辑及组合控件的封装

本文实例为大家分享了Android编辑信息界面，及组合控件的封装，供大家参考，具体内容如下

02

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

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

01

[译] 优化 React APP 的 10 种方法

在开发任何软件（尤其是Web应用程序）时，优化是每个开发人员考虑的第一件事。像Angular，React等其他JS框架都包含了一些很棒的配置和功能。在这里，我将回顾有助于您优化应用性能的功能和技巧。

02

taro+react导航条组件/自定义底部Tabbar导航

最近在研究taro框架技术，发现官方提供的实例基本都是H5、小程序，对于RN端实例甚少，如是自己就实现了自定义导航栏+tabbar组件，支持自定义背景、颜色、左侧图标、标题居中、搜索框，右侧按钮支持图标/文字/图片，还可以设置样式，红点提示、事件处理

02

18段代码带你玩转18个机器学习必备交互工具

作者 | 曼纽尔·阿米纳特吉（Manuel Amunategui）、迈赫迪·洛佩伊（Mehdi Roopaei）

00

18段代码带你玩转18个机器学习必备交互工具

作者：曼纽尔·阿米纳特吉（Manuel Amunategui）、迈赫迪·洛佩伊（Mehdi Roopaei）

02

IDEA快速入门(Mac版)

【持续更新】一篇今年年头的老文章顺道发布了，大家有任何问题可以留言沟通。当时刚刚加入团团，愿大家有机会还是购买一台MAC，确实能给大家的效率赋能，虽然在一开始会有一些艰难！⛽️ 望借着换工作的东风，好好的俊一波IDEA，之前始终习惯于Eclipse的使用。

02

最新iOS设计规范七｜10大视觉规范（Visual Design）

iOS是运行于iPhone、iPad和iPod touch设备上、最常用的移动操作系统之一。作为互联网应用的开发者、产品经理、体验设计师，都应当理解并熟悉平台的设计规范。这有利于提高我们的工作效率，保证用户良好的体验。本文是iOS设计规范系列第7篇，介绍视觉设计（Visual Design）。

03

优秀组件设计的关键：自私原则"

在开发新功能时，是什么决定了现有组件是否可行？当一个组件不能使用时，这究竟意味着什么？

03

127. 精读《React Conf 2019 - Day1》

React Conf 2019 在今年 10 月份举办，内容质量还是一如既往的高，如果想进一步学习前端或者 React，这个大会一定不能错过。

02

html网页详细代码「建议收藏」

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/136151.html原文链接：https://javaforall.cn

04

该从Sketch切换到Figma吗？两款工具深度对比

静电说：各位设计师，你们是不是已经有选择困难症了？现在工具越来越多了，那么究竟用哪个做UI更合适呢？来看看作者的分析吧！在这里提前给大家一些建议，对于Win平台同学，建议先熟悉一下Figma，因为它比XD确实好很多。Mac平台同学，根据需求决定就好。

03

移动体验设计6大禁

我们一开始为什么去安装应用程序？是为了使我们的生活更方便。但当一个应用无法满足这一要求时，用户肯定就会离它而去。一个应用的成功是受多种因素影响的，其中整体移动用户体验是最重要的影响因素。绝佳的用户体验是一个应用程序成功的关键。就移动用户体验设计而言，不断地实践是检验其好坏的一条必经之路。在这篇文章中我们聚焦于基础，我们需要去解决的是，如何避免打断用户或者强迫用户思考的问题。多平台用户界面设计界面是能使应用的用户体验脱颖而出的一个重要的因素。大多数的开发人员都希望在不同终端上发布他们的应用。当你为多平

Sweet Alert弹窗插件的安装及使用详解笔记

Sweet Alert 是一个替代传统的 JavaScript Alert 的“美化版”提示效果。SweetAlert 自动居中对齐在页面中央，不管是台式电脑，手机还是平板电脑看起来效果都很不错。

01

AI绘画程序Midjourney强势来袭！你准备好了吗？

如果说GPT4接入Microsoft的应用极大程度减轻了文字工作者的工作负担，甚至一定程度上造成文字工作者的职业焦虑。那AI绘画程序Midjourney的诞生极有可能洗盘整个设计圈，颠覆整个设计行业。

03

第三波！5个超好用的Figma插件

Figma是一个涵盖设计，协作等功能于一体的绝佳工具，借助插件功能，更是可以让设计师如虎添翼，改善你的工作流程。

02

设计图转Compose代码，Relay帮你轻松搞定

相信很多人看到本次分享分题目，第一反应都和我一样：Relay是什么？有什么用？和Compose有什么关系？不要着急，看完这篇文章，这些你都会了解。

01

Linux Simple Terminal

linux 下有许多优秀的 Termainl，我在用的有deepin-terminal,alacritty,‘simple terminal’.alacritty 是一款使用显卡渲染的终端模拟器，非常的快并且流畅，并且支持终端显示图片，所以比 deepin-terminal 更让我喜欢，然而 simple terminal 确实一款十分简单的终端模拟器，虽然简单但功能却一个不少，体积更小。甚至连配置文件都没有，每次更改配置都要修改源代码并且编译生成程序，实在是够简单。但是在 deepin 上无法直接安装，需要安装几个依赖的软件。

01

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

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

07

HTML5 VideoAPI，打造自己的Web视频播放器

注意：audio和video元素必须同时包含开始和结束标签，不能使用

04

使用TypeFace设置TextView的文字字体（附源码）

在Android里面设置一个TextView的文字颜色和文字大小，都很简单，也是一个常用的基本功能。但很少有设置文字字体的，今天要分享的是通过TypeFace去设置TextView的文字字体，布局里面有两个Button，总共包含两个小功能：换字体和变大。

02

【抖音小游戏】 Unity制作抖音小游戏方案最新完整详细教程来袭【持续更新】

前往字节小程序开发者平台，进行账号注册，然后创建小游戏，选择即玩Unity&UE小游戏并填写一些基本信息。

02

自制在线富文本编辑器，精简完整版

不需要插入图片功能的去掉php代码然后将.php文件改为.html即可变成本地文本编辑器，是不是很酷！当然功能跟world比没那么强大！

01

WordPress 3.9+的 TinyMCE 4 编辑器增强开发

从WordPress 3.9版本后，WordPress 默认的编辑器 TinyMCE 随之升级到了版本4，带来的问题以前在默认编辑器上的增强开发的效果可能失效。这篇文章旨在破旧立新，通过几个例子给大家带来几个TinyMCE4 编辑器的增强开发技巧。还原字体种类及大小选择按钮默认的话，字体种类及大小这两个按钮没有添加到TinyMCE 编辑器中，通过下面的函数，就可以实现有下拉形式的字体种类及大小这两个按钮。 // Enable font size & font family selects in the

06

使用 TypeScript 优化 React Context：综合指南

React Context 是在 React 应用程序中管理全局状态的强大工具。它允许组件共享和访问数据，而无需进行复杂的prop drilling操作。无论您是希望刚开始使用 Context 的初学者，还是希望优化 Context 使用性能的中级开发人员，本文或许都能给您提供一些灵感。

04

compose--初入compose、资源获取、标准控件与布局

compose正式发布已经一年多了，越来越多的开发人员选择使用它，声明式UI也是未来的一个主流趋势，本人也是一年前学习后，并没有真正的使用，所以本着边学习，边分享的心态，准备写个compose系列的文章首先compose目前只支持kotlin，基于google对移动端的鸿图，未来应该也不会支持其他语言，和传统安卓的xml布局不同，compose是通过kotlin定义一个一个组件，由于是通过代码定义的组件，每个组件都可以很方便的重用，这点在UI开发时确实便利了不少。至于声明式UI和命令式UI的区别，相信你会在后续实际使用时有很大的感触

03

怎样在 Unity 中创建 UI

在现在每一个软件应用中，用户界面（UI）都是核心的特征。游戏也没有抛弃这一规则。有非常多的游戏都使用 UI 来显示一些信息，比如生命值，技能，地图，武器的弹药，等等。 Unity 3D 提供了许多 UI 组件，你都可以在你的游戏中使用它们。在这篇文章中，我会指导你在 unity 的菜单中如何创建一个简单的暂停菜单。这个暂停菜单将显示一个内容为『Paused』的 text 组件和三个按钮组件：分别是复位按钮『Resume』，重新开始按钮『Restart』，退出按钮『Quit』，并且还是显示游戏从场景加载到现在的时间。在这篇文章的最后，你应该创建出了类似下面的界面：

02

好用不卡，这些插件和配置让你的 Webstorm 更牛逼！

作为前端开发者，最趁手的搬砖工具无外乎 Webstorm 和 VSCode，Webstorm 像苹果系统，闭源、收费、官方有良好而强大的开发能力、智能索引和补全功能无出其右者，VSCode 就像安卓，开源、持续迭代更新、社区充满活力。

04

怎么在没有专业UI的情况下设计出一个美观的工业组态界面?

一般来说，工控项目设计包含软件界面和硬件设备两个大方面。硬件支撑系统功能，软件展示项目功能，二者相互配合，缺一不可。在目前的工控行业里面，软硬件发展的都比较成熟，工程师们能够独立完成功能，然而在现在竞争日益激烈的情况下，无论是触摸屏还是PC机，因为直观的展示了项目的全貌，软件界面显得愈发重要。

01

自研flutter3.22+getx手机版os桌面管理系统

flutter3.x-weos：原创研发flutter3+dart3+getx+fl_chart构建手机桌面OS管理系统模板。

00

善事利器｜5个最好的信息图在线创做工具

摘自：coolinfographics.com 编译：康欣欢迎个人转发朋友圈；其他机构或自媒体转载，务必后台留言，申请授权子曰：工欲善其事，必先利其器。——《论语•卫灵公》专业信息图设计者，大多依赖于一个核心的矢量图形软件来创作信息图设计。其主要优势在于，所有图标、图表、图片、演示以及数据可视化都是分立的物体，可以很轻松地将它们移动、改变大小、重叠以及旋转；无论在哪里创建了单独的设计元素，最终的信息图设计，通常是在矢量图形软件中将各个元素组合在一起。使用在线工具创建信息图从来都不会比上述方式更容易

02

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

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

04

前端主题切换方案详解

现在我们经常可以看到一些网站会有类似暗黑模式/白天模式的主题切换功能，效果也是十分炫酷，在平时的开发场景中也有越来越多这样的需求，这里大致罗列一些常见的主题切换方案并分析其优劣，大家可根据需求综合分析得出一套适用的方案。

03

Android自定义控件EditText使用详解

本文实例为大家分享了Android自定义控件EditText的具体代码，供大家参考，具体内容如下

01

游戏优化系列二：Android Studio制作图标教程

大家好，我叫Jack冯；本人20年硕士毕业于广东工业大学，于2020年6月加入37手游安卓团队；目前主要负责海外游戏发行安卓相关开发。

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭