开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

更改字体很棒的图标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图标使用材料表更改角度为什么我的字体很棒的图标没有居中？堆叠字体很棒的图标与透明的中间？我的页面上没有显示字体很棒的图标字体-在文本区内不显示很棒的图标如何在占位符中设计字体很棒的图标？

相关搜索:

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

有帮助

没帮助

相关·内容

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

2015-05-07 10:36:23 我们经常在网站上采用百度分享或者是jiathis分享功能，但是他提供了默认的图标，这些传统的图标看的久了就会感觉它不舒服，希望能够使自己网站的分享图标与众不同，...很明显，尝试通过修改css样式的方法来修改他的图标是不可能的了。...但是当你点击他的默认分享图标时你会发现地址栏里的地址非常的长，放在网址解码器里你会发现里面的是一些必要参数，也就是说我们只需要修改这些参数，然后为我们自己的图片添加click事件即可实现更改分享功能的默认图标...下面这行代码是用来定义自己的图标，通过点击图标来分享网页内容。...更改为你想分享的网页地址即可。

1.1K2 0

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

在上一篇文章中，我介绍了一种分享的方式，他有一定的局限性，当你要分享的网址有参数且不止一个时，你会发现他分享出去的网址参数不全。这篇文章是对上一篇文章的一个补充，也可以说是另一种写法。...我们布好局后，点击相应图标来触发他分享功能的a标签，这样也可以实现分享功能，并且简单可靠。下面我来给大家说一下具体的方法。我们还用jiathis来做例子。首先我们需要引入他给好的代码。 <!...有的朋友会说了，这样引入之后他的图标就正常显示出来了，要怎样将他隐藏呢，其实很简单，给他设置css属性，让他非常的小，并且他的z-index属性值小于其他层的值，让他位于其它层之下，这样就达到了隐藏的效果...下面就是我们要点击的图片了给这个图片设置一个onclick事件，在js中设置一下，看一下代码。...这只是其中一个例子，大家有兴趣的可以多试试其他的，只要给相应的a标签设置id，然后设置点击事件即可。

1.1K1 0

更改QT程序的图标

制作ICO图表文件首先自己准备好喜欢的BMP位图文件，然后利用图标制作工具IconMaster将位图文件转化为ICO图标文件 2....制作rc资源文件用记事本新建个文件，里面就写一行：IDI_ICON1 ICON DISCARDABLE “myappico.ico” 其中myappico.ico为自定义的图标的名称...链接将 myapp.rc和图标myappico.ico一起复制到你的QT工程项目的目录。...并在.pro工程中添加一行：RC_FILE = myapp.rc 通过这样的简单步骤就完成了自定义的图标制发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/110444

1.2K2 0

字体图标iconfont的使用

1.将从阿里矢量图标库中图标并下载到本地 2.使用图标（三种使用方式） 1.使用 FontClass（最简单方式，支持字体样式定义但不支持多色字体） fontClass 支持字体的样式定义，但不支持多色字体...) 支持字体的样式定义，但不支持多色字体，兼容性最好，支持 IE6+，及所有现代浏览器。...支持按字体的方式去动态调整图标大小，颜色等等。第一步：拷贝项目下面生成的 @font-face 引入以下文件：注意需要将对应的文件引入，和注意修改引入文件时的路径。...--不生效--> } 注意：iconfont 图标 symbol 引用方式，有的图标不能通过设置 color 样式来修改颜色的解决办法原因：当从阿里图库中图标被添加至项目，如果编辑过项目图标的颜色或者图标本身是有颜色的...，那么在通过 symbol 获取图标时会在 svg 的 path 中增加 fill 属性，导致无法更改颜色，如果需要动态修改颜色，需要从新添加该图标(本身图标无色)，获取在 symbol 的 js 文件中程序删除

4.1K2 0

怎样更改组件库的图标？

想必很多前端现在都是用别人的组件库，ant-design、element-ui或者vant等，那么当组件上的icon和我们美丽动人的UI小姐姐画出的UI稿不一样的时候，你们会怎么做呢？...组件api替换大法 1、组件本身提供api给你更换icon，换之则可 2、但每次使用都要替换也是挺麻烦的，可以尝试先封装一下，使用高阶组件可行性高，操作容易、略麻烦源码copy大法 1、不使用传统的...npm install的包安装方法 2、将组件库的源码copy下来单独一个文件 3、修改源码组件对应的图标 4、或者自己建立一个私有的npm库将整个组件库推上去 1、一次操作到位 2、但是组件库版本滞后...EyeOutline' export { default as DeleteOutline } from '@ant-design/icons/lib/outline/DeleteOutline' 就是将你需要更改的图标的地址改为你本地的...而且这里可以只引入一些你需要的图标，会减少一些icon库的打包大小本地的图标 "use strict" Object.defineProperty(exports, "__esModule", {

8531 0

Android开发更改返回button的图标

非常多的Android应用左上角都有返回button 在默认的情况下 ADT会默认给一个返回图标而作为开发需求非常多都要求定制一个新的图标在Android的站点上发现了2种能够更改的方法 1...假设有错误提示 Call requires API level 18 (current min is 14): android.app.ActionBar#setHomeAsUpIndicator 说明当前的最小...--返回icon--> 然后在AndroidManifest.xml中在其Activity 的theme中设置成该style <activity...com.logic.activity.Activity1" android:theme="@style/style_titlebar_normal" > 这样的方法对

1.1K2 0

为Typecho站点更改好看的字体

前言今天有个访客在我博客里逛了好久，问我“你的站字体怎么这么好看啊？”“能不能教教我啊？”，好吧，那我就勉为其难出个教程吧！...这篇文章适用于handsome主题，如果不是这个主题的，请移步百度搜索“网站更换字体代码”，最后替换一下链接即可！...1.安装AliceStyle插件这是兔子的美化handsome的插件，介绍一下：内置16个优美的动&...） - 萌卜兔's (racns.com)自行下载插件吧~ 2.下载HarmonyOS字体-HarmonySanc 移步通用设计基础-字体 (harmonyos.com) 这是官方开放开发文档，...3.开启插件并使用字体这里，输入你的字体链接，从而实现字体美化效果！

1.2K1 0

为Typecho站点更改好看的字体

前言今天有个访客在我博客里逛了好久，问我“你的站字体怎么这么好看啊？”“能不能教教我啊？”，好吧，那我就勉为其难出个教程吧！...这篇文章适用于handsome主题，如果不是这个主题的，请移步百度搜索“网站更换字体代码”，最后替换一下链接即可！...1.安装AliceStyle插件这是兔子的美化handsome的插件，介绍一下：内置16个优美的动&...） - 萌卜兔's (racns.com)自行下载插件吧~ 2.下载HarmonyOS字体-HarmonySanc 移步通用设计基础-字体 (harmonyos.com) 这是官方开放开发文档，...3.开启插件并使用字体这里，输入你的字体链接，从而实现字体美化效果！

1.2K2 0

Android App更改应用的图标的实现方法

Android App更改应用的图标的实现方法一般情况下，我们App图标在Androidmanifest.xml中设置，通过Application android:icon属性指定，写法如下： <?...</application </manifest 因新年来临等，产品需要针对最新版本更换一个应用图标。OK，一分钟搞定，如上，直接替换app_icon.png图标即可。...然而，测试同学发现，替换图标后，在小米5、华为6plus、乐视乐1S、小米2s、魅族MX5等手机上应用依然显示以前图标。...</application </manifest 通过入口Activity android:icon=”@drawable/new_app_icon” 指向新的应用图标。...以上就是Android 更改图标的实例详解，如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

1.6K3 0

【最全】为Typecho站点更改好看的字体-ProMax

本文将用到： xxhzm的FontLibs插件 xxhzm,Ryan的公益静态CDN加速来自于网络的最全字体库 ...待更新开始-安装插件FontLibs插件下载字体文件精简可以把字体文件中的不常用字体删除，只保留项目中使用的文字，以此来减少字体文件的体积，方便网络传输。...推荐一个在线压缩精简字体的网站：此处内容需要评论回复后（审核通过）方可阅读。

1.5K1 0

更改PPT所有页面字体与页面颜色的技巧

在评估期间，无心插柳地探索到一个新技术，就是关于PPT课件统一更改字体颜色和页面背景颜色的问题。...这时你肯定想同时更改所有页面的背景颜色和字体颜色（大款及不想为基金省钱的除外）。几页还好说，一页一页改就是了，但我的PPT往往一章都在一起，多达100多页，怎么办？人民的智慧是无穷的！...你的所有PPT都变成了黑白灰色，包括图片，所有页面背景是正常白色，所有字体是黑色（包括链接），原来你用的设计模板的颜色样式这时完全不起作用了！放心去打印吧！...打开你要打印的PPT课件，在任一页面无内容的空白处点击右键，选择幻灯片配色方案，你可以点击选用标准配色方案中有黑白灰三色的方案；也可自定义配色方案颜色，把所有背景色变为白色、字体变为黑色等。...但如此做有一不完善之处，即那些你在做PPT时设置了特定填充色和特定字体颜色的文本框（不是你的PPT模板默认的颜色）会改成其设定颜色的反色，也即这些文本框需要你手动修改，好在一般这样的文本框不多。

5.6K3 0

更改 TUIKit 实现消息转发的功能

更改 TUIKit 实现消息转发的功能前提背景: 当前 IMSDK 5.1.21 版本的 TUIkit 还不支持消息转发的功能(后续很快将提供)....这个示例可以作为一个转发消息参考实现原理一句话介绍: 拿到当前消息的信息, 转发的时候重新构建一条新的消息发送出去 step1: 添加长按菜单项目长按消息出现转发选项, 可以在 tuikit 的 -..., 示例为文字和图片消息图片消息需要拿到当前的图片消息, 获取当前的 localPath, 再构造一个图片消息, 调发送接口发送(视频文件消息同理) - (void)onSelectFriend:(TCommonContactCell...[self dismissViewControllerAnimated:YES completion:nil]; } } 对于多选转发则会复杂一点, 原理以相同, 只是需要更多的自定义的...UI, 如果不着急可以等等 TUIKit 官方的更新

9191 1

【Flutter】Icons 组件 ( FlutterIcon 下载图标 | 自定义 svg 图标生成 ttf 字体文件 | 使用下载的 ttf 图标文件 )

文章目录一、FlutterIcon 下载图标二、自定义 svg 图标生成 ttf 字体文件三、使用下载的 ttf 图标文件四、完整代码示例五、相关资源一、FlutterIcon 下载图标 -...--- https://www.fluttericon.com/ 可以根据需求挑选合适的 icon 图标 , 生成 ttf 文件 ; 下图中 , 选中需要生成 ttf 字体文件的图标 , 这里选中了前..., 后面一串是随机生成的数字 ; 该压缩包中主要有三个文件 , ① ttf 字体文件 : MyFlutterApp.ttf , svg 格式的图标就封装在该文件中 ; ② dart 文件 : Flutter...图标文件 ---- 将 MyFlutterApp.ttf 字体文件拷贝到 Flutter 源码根目录下的 fonts 目录下 , 在 pubspec.yaml 配置文件中配置字体文件 , name:...IconData(0xf008, fontFamily: _kFontFam, fontPackage: _kFontPkg); } IconData 构造函数参数说明 : codePoint : 字体中的图标对应的十六进制

2.4K2 0

Android Studio进行APP图标更改的两种方式总结

百度了许多相关资料，对两种修改app图标的方式进行总结：第一种：（最简单的方法）将你准备好的图标放入res目录下的drawable，在AndroidManifest.xml文件中，找到android...:icon以及android:roundIcon这两个属性,设置为你放入的图标文件。...若不一致，我测试结果是显示的roundIcon指定的对象，找到android:roundIcon 属性的解释： android:roundIcon 属性指定一个图标，但只有你需要给应用设置一个特别的圆形图标时才要用到这个属性...总结一下，方法二生成的图标的适配效果更好，方法一的效果可能会跟预先设想的效果存在出入。...到此这篇关于Android Studio进行APP图标更改的两种方式总结的文章就介绍到这了,更多相关Android Studio APP图标更改内容请搜索ZaLou.Cn以前的文章或继续浏览下面的相关文章希望大家以后多多支持

10.3K2 1

android全局更改字体大小遇到的一些坑

前言最近app想控制全局字体大小，于是想用改变fontScale的方式来动态改变字体的大小。遇到一些坑，特此记录。...以后想接受全局字体设置的就继承BaseActivity。...Configuration config = res.getConfiguration(); config.fontScale = getTextScale();//1 设置正常字体大小的倍数...float text_scale = sp.getFloat("text_scale", 1.0f); return text_scale; } ---- 编写改变字体大小的方法...//调整字体大小 public void changeTextSize(float change_size, List views) { SharedPreferences

6322 0

网站发布后bootstrap字体图标不显示的解决方法

网站发布到IIS后，发现网站使用的Bootstrap框架所引用的woff字体无法正常显示。...于是跟踪http请求，发现woff字体请求出现GET .woff 404 (Not Found)的问题，但是项目中woff字体的文件并未丢失。...后经排查，原来是服务器上IIS没有添加woff字体的MIME类型，导致发送HTTP请求时，IIS无法处理和识别此类型的文件。

1.7K2 0

微信小程序----引入外部字体库iconfont的图标

直接使用阿里巴巴的网络路径选择iconfont图标官网：阿里巴巴矢量字体库步骤：阿里巴巴字体库使用方法 ?...个图标 */ .icon-zhiding:before{content: '\e739';} .icon-zuojiantou:before{content: '\e736';} .icon-youjiantou...content: '\e62a';} .icon-shanchu:before{content: '\e629';} .icon-dianhua:before{content: '\e61b';} 使用图标...注意：此处实现采用的是无APPID的开发模式，实际应用应该在微信小程序管理平台的开发设置中配置合法域名。...下载到本地步骤字体文件转化成base64格式解压压缩包 ---- 找到ttf格式文件 ---- 上传到平台转化为base64格式 ---- 下载压缩包 ---- 将css文件名改为wxss --

2.6K1 0

zblog未开启https后台不显示字体图标，提示“拒绝加载字体”错误的解决办法

之前给客户处理问题的时候发现他的网站没有开启https功能，也就是我们所谓的SSL证书，当时并没有在意可能觉得是服务器主机没有设置正确导致的，但是我的测试站因为SSL证书到期之后也出现了“Refused...“拒绝加载字体'/zb_system/image/icon/zblog.ttf？...最初我也以为是服务器设置问题导致不能加载字体文件，于是乎我在NGINX服务加上了字体的格式，如图：因为我很清醒的记着在win服务器里面，需要在IIS服务器上添加MIME类型，但是Linux我记得不需要...好吧，这就知道了，找到根了，官方设计如此，胳膊拗不过大腿啊，随后猪猪管理来了一句他本地也没有https但是访问正常，让我试着关闭“安全增强”功能，我在后台一看还真实开启状态，关闭之后正常了，呼呼原来如此...，安全增强不仅仅是网站安全性还包括了https方面的，具体关闭方法如下：后台，网站设置-全局设置-安全增强（灰色关闭）如图关闭之后刷新页面，清空缓存编译，再加上强制更新（Ctrl+F5）图标显示正常

1.9K1 0

android 更改TextView中任意位置字体大小和颜色的方法

这里介绍两种方法，一种是Spannable，一种是Html.fromHtml(通过html标签来改变），实际中看您使用哪种方便选择使用即可 1.Html.fromHtml的使用 TextView textView...= (TextView) findViewById(R.id.text); String textSource = "修改TextView中部分文字的<font color='#ff0000' <big...; textView.setText(Html.fromHtml(textSource)); 上面是没有加html标签，下面是加了html标签的效果： ?...以上这篇android 更改TextView中任意位置字体大小和颜色的方法就是小编分享给大家的全部内容了，希望能给大家一个参考。

7.4K4 0

Android实现修改状态栏背景、字体和图标颜色的方法

需求场景: 当toolbar及状态栏需要为白色或浅色时(如简书),状态栏由于用的Light风格Theme,字体,图标也都是白色,会看不清.如果改变成黑色就很和谐了....我用的手机是华为,系统7.0 二.修改状态栏字体: 通用工具类: public class StatusBarUtil { /** * 设置状态栏黑色字体图标， * 适配4.4以上版本MIUIV、Flyme...* 可以用来判断是否为Flyme用户 * * @param window 需要设置的窗口 * @param dark 是否把状态栏字体及图标颜色设置为深色 * @return boolean 成功执行返回...); window.setAttributes(lp); result = true; } catch (Exception e) { } } return result; } /** * 设置状态栏字体图标为深色...，需要MIUIV6以上 * * @param window 需要设置的窗口 * @param dark 是否把状态栏字体及图标颜色设置为深色 * @return boolean 成功执行返回true

6K4 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭