开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

iconfont :如何让iconfont在颤动中工作

iconfont是一种图标字体，它将图标以字体的形式进行展示，可以通过CSS样式来调用和控制。它的优势包括减少HTTP请求、提高页面加载速度、支持多色图标、可自定义样式等。

在让iconfont在颤动中工作时，可以通过CSS动画来实现。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    @keyframes shake {
      0% { transform: translateX(0); }
      25% { transform: translateX(-5px) rotate(-5deg); }
      50% { transform: translateX(5px) rotate(5deg); }
      75% { transform: translateX(-5px) rotate(-5deg); }
      100% { transform: translateX(0) rotate(0); }
    }
    
    .icon-shake {
      animation: shake 1s infinite;
    }
  </style>
</head>
<body>
  <i class="fa fa-heart icon-shake"></i>
</body>
</html>

在上述代码中，我们使用了Font Awesome图标库，并通过CDN引入了其CSS文件。然后，我们定义了一个名为"shake"的关键帧动画，通过transform属性实现图标的颤动效果。最后，通过添加class为"icon-shake"的样式，将动画应用到了图标上。

这样，当页面加载时，图标将会在一个持续时间为1秒的动画中颤动起来。

腾讯云相关产品中，可以使用对象存储（COS）来存储和托管iconfont文件，使用云服务器（CVM）来部署和运行网页，使用内容分发网络（CDN）来加速图标的传输。具体产品介绍和链接如下：

腾讯云对象存储（COS）：提供高可靠、低成本的云端存储服务，适用于存储和托管各类文件，包括iconfont文件。详细信息请参考腾讯云对象存储（COS）。
腾讯云云服务器（CVM）：提供可扩展的云服务器，用于部署和运行网页。详细信息请参考腾讯云云服务器（CVM）。
腾讯云内容分发网络（CDN）：加速内容传输，提高网页加载速度，适用于传输iconfont文件。详细信息请参考腾讯云内容分发网络（CDN）。

通过使用以上腾讯云产品，可以更好地支持和优化iconfont在颤动中的工作效果。

相关搜索:在颤动中，BottomNavigationBar不工作如何使用BottomNavigation和命名路由让CircularProgressBar或其他微调器在颤动中工作？如何让@apply在TailwindCSS中工作？如何让AtomicInteger在Runnable类中工作如何让azcopy在docker中工作如何让CSV在RevitPythonShell中工作？如何让CustomPaint像这样在颤动中如何让EventPattern在Nest JS中工作如何让for...in循环在promise中工作？如何让GitVersion在Jenkins中工作

相关搜索:

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

有帮助

没帮助

相关·内容

【音频处理】Melodyne 自动修正功能 ( 修正音高中心 | 修正音高补偿 | 节拍自动修正 | 量化时间 )

仔细观察编辑面板中的音符 , 很少有处于正中心位置的音符 , 大部分音符的音准都不准确 , 这里建议使用自动修正功能进行修正 ;

01

转转搭建 iconfont 平台实践

所以在实际的业务代码中 icon 问题的解决方案往往也是八仙过海，能用就行。比如导出为 png, svg 格式的文件，在项目中作为静态资源直接引用，或者上传到 CDN 作为外链引用。显然这些方案多少都存在着一些小问题：

02

浅尝iconfont

在所有包含ui的程序架构中，以上不同的ui元素在各种环境中都会遭遇到不同的问题，同时也都有与之对应的解决方案 iconfont 就是一个解决【图标】问题的解决方案之一

02

前端不止：请告诉我，你要什么样的图标

有一个英语成语叫做一画胜千言（A picture is worth a thousand words），不知道大家有没有听过？它是指的是一张静态的图片就可表达一个复杂的概念或者与一个主题相关的图片有时比起详细的解释，能够更有效的描述有关主题。——“一画胜千言”维基百科如果我们要用一句话来说明图标的作用，没有比这个成语更适合的词了。本篇文章，我们就来聊聊关于图标的一些事情。 ---- 一个图标的生命周期（工作流程）关于图标的生命周期，在我个人所经历的开发项目中，有以下两种：第一种方式：图标库(选择阶段)

07

10 个效率网站，助力带薪摸鱼！

在日常工作中，为了提高工作时的效率，我常常会在闲暇时光去网上冲冲浪，寻找那些能够给我工作工作带来帮助的网站或者 APP。而随着时间的推移，我的收藏夹藏货越来越满了。秉承着独乐乐不如众乐乐，就想着随便挑几个分享出来，让大家也开心开心！

02

浅尝iconfont

07

Iconfont 还是不能上传，如何维护你的 Icon？

使用 iconfont 有很多优势，比如只需要加载一次，全部图标都可以设置字号大小，颜色、透明度等，可以随意变换字体的形态，并且图标是矢量的，不会随着字体大小的变化失真，得益于 iconfont.cn 提供的便利，大多情况下，我们不必上传自己的图标，只需要便捷的搜索，就可以将图标加入到自己的项目图标库中，但最近工作中却遇到了比较严重的问题。

03

Iconfont在教育平台的实践

07

Iconfont在教育平台的实践

性能优化是前端开发不得不面对，必须重视的一个经久话题。教育平台项目除了常规的web性能优化外，图片资源站到了流量的70%+，因此图片的性能优化是个重中之重。除了常规的图片优化外，课程封面和机构上传的图片采用了webp格式，之前已介绍过，不再赘述。这样，对平台图片的优化已经达到极致了吗？

02

斯坦福与苹果基于Apple Watch检测心率异常，0.5%人群被检出，其中84%患有房颤

雷锋网消息 3月16日，斯坦福大学医学院研究人员在洛杉矶新奥尔良举行的美国心脏病学会第68届年度科学会议和博览会上公布了一项基于Apple Watch的心脏研究结果。

01

Typecho中handsome主题如何增加侧边导航栏

💂作者简介： THUNDER王，一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读，同时任汉硕云（广东）科技有限公司ABAP开发顾问。在学习工作中，我通常使用偏后端的开发语言ABAP，SQL进行任务的完成，对SAP企业管理系统，SAP ABAP开发和数据库具有较深入的研究。 💅文章概要：handsome主题在使用的过程中导航栏初始时只有首页一个导航页面，本篇文章主要讲解一下应该如何修改源代码增加多个导航栏并且为其设置子导航。 🤟每日一言：将来的你一定会

03

《从案例中学习JavaScript》之酷炫音乐播放器（三）进度条音轨

上一节传送门：http://www.jianshu.com/p/f6f77d6d714f 本节概览：进度条音轨原理这一章主要分享两个东西，分别是进度条和音轨。进度条相对来说比较简单，于是先讲。

06

车床震颤的原因及排除

如果您的刀具过度磨损，切削产生的切削力将会增加。这些增加的切削力会导致切削过程中出现颤动。

01

【愚公系列】2022年03月微信小程序-富文本编辑器

编辑器导出内容支持带标签的 html和纯文本的 text，编辑器内部采用 delta 格式进行存储。

01

【愚公系列】2022年03月微信小程序-富文本编辑器

编辑器导出内容支持带标签的 html和纯文本的 text，编辑器内部采用 delta 格式进行存储。

02

在React Native中优雅的使用iconfont

React Native大火大热，其中为了解决图标，易于修改，换颜色，高清等需求，iconfont的应用更是必不可少。 React Native中的iconfont 关于在React Native中使用iconfont，网上已有很多非常好的解决方案，用的最多的就是react-native-vector-icons , 这个库支持很多常用的iconfont,比如FontAwesome, Ionicons, MaterialIcons等等。但是这个库依赖了不少iOS和Android的原生代码，这让一

04

字体图标的绘制和使用技巧

从事前端的朋友应该对“字体图标”这个词汇不陌生，为了适应越来越挑剔的屏幕，网页图标和简单图案使用 .png 来搭建已经基本上被淘汰了。取而代之的是使用 css3 和 svg 来绘制，而对于网页小图标，

微信小程序使用阿里巴巴的矢量图标iconfont

在这里我创建一个示例项目找两个图标加入 (如果项目很小需求比较少才一两个的话直接选择颜色下载png格式就好了) 我主要是为了减少包体积而且增添方便图标颜色控制加载快(微信小程序上传上限为 2048 kb)

03

Layui 2.8.0 正式发布，官网全新文档站朴实归来

两年前 Layui 官网宣布了下线声明，说实话当时内心确实感慨万千毕竟这个免费为我们后端程序员提供的一个前端快熟开发框架的官网就这样下线了确实十分的惋惜，但是庆幸的是官网的下线，只是单纯一个网站自身生命周期的结束，它并不意味着 Layui 这样一个开源项目的停更，Layui 仍然在 Github 和 Gitee 保持活跃，并不存在所谓的停止更新，甚至从 2.6.9 一直迭代到今天的最新版本。两年来，Layui 始终处于没有中心文档的窘迫境地，虽然也一度以 Gitee Pages 为文档的承载，但似乎很难形成一个焦点和归属感。随着 2.8.0 正式版本的发布，它所包含的上百项的内容更新，使得全新的文档站呼之欲出。Layui 新官网于 2023年4月 Layui 2.8.0 正式发布，全新文档站朴实归来。

03

Layui 2.8.0 正式发布，官网全新文档站朴实归来

两年前 Layui 官网宣布了下线声明，说实话当时内心确实感慨万千毕竟这个免费为我们后端程序员提供的一个前端快熟开发框架的官网就这样下线了确实十分的惋惜，但是庆幸的是官网的下线，只是单纯一个网站自身生命周期的结束，它并不意味着 Layui 这样一个开源项目的停更，Layui 仍然在 Github 和 Gitee 保持活跃，并不存在所谓的停止更新，甚至从 2.6.9 一直迭代到今天的最新版本。两年来，Layui 始终处于没有中心文档的窘迫境地，虽然也一度以 Gitee Pages 为文档的承载，但似乎很难形成一个焦点和归属感。随着 2.8.0 正式版本的发布，它所包含的上百项的内容更新，使得全新的文档站呼之欲出。Layui 新官网于 2023年4月 Layui 2.8.0 正式发布，全新文档站朴实归来。

04

医学统计分析：心电图智能诊病

心电图智能事件识别背景心电图（ECG）是一种简单、经济的院内检查手段，是患者住院或日常体检的常用检测项目。由计算机辅助医生对心电信号进行识别，有望减轻医生工作负担，并降低人工造成的漏诊。对于某一时长的 ECG 数据，识别其包含哪些心律失常事件，是目前热门的研究方向。赛题任务本任务提供原始电信号数据，并据此识别心电信号中所隐含的心律失常事件。数据集介绍数据一共包含39732条心电数据，被随机划分为训练集和测试集，比例为7:3。 ecg_data文件夹下的所有心电数据，文件名就是此样

01

第104天：web字体图标使用方法

注意：新版iconfont支持多色图标，这些多色图标在Unicode模式下将不能使用，如果有需求建议使用Symbol的引用方式

01

阿里iconfont使用方法

文章链接: https://qw-null.github.io/2021/07/20/阿里iconfont使用方法/ ★转载请注明来自 QW’s Blog！★

02

Jekyll 社交图标集合创建

一般来说，我们的个人博客都会放上一些社交图标以及社交链接。这样一来，想要关注我们更多的最新研究或工作的读者就可以很快找到路径。于是，在 Jekyll 博客主题设计的时候，通常会在个人简介的地方放置几个社交小图标，点击社交小图标即可把读者带到你的社交个人主页上。对于不同类型的作者，常用的或者关注的社交平台基本上不大一样，社交小图标也会有不一样的需求。比如说，对于从事科研工作的人来说，像谷歌学术、ResearchGate、ORCID 等等能够列举发表论文或者相关研究的平台就比较重要；对于一般程序员来说，像 Github、Gitlab、Segmentfault、CSDN、简书等等能够展示自己所参与的项目和技术心得体会的平台就比较重要；对于前端设计师来说，像 Instgram、UI 中国、Dribble等等能够展示 UI 设计作品的平台就比较重要。因此，对于一款 Jekyll 博客主题的设计者来说，同时要兼顾到这么多不同的需求可能会有点为难，毕竟领域不同、了解的程度也很有限。

04

从 Web 图标演进历史看最佳实践

导读：在产品中适当使用图标，可以让产品更生动，也更简洁。在前端项目中，处理和引入图标都是必不可少的环节。在 Web 产品中引入图标，大致经历过如下几个阶段：使用独立的图片来引入图标、使用 CSS sprites 技术、使用字体图标（font icons）、使用 SVG（inline SVG/SVG sprites）、在前端视图层框架中封装组件。本文将简单梳理一下图标相关的工作流程的演进，以及我们在百度设计语言系统推进过程中相关的一些尝试。

01

想提高面试通过率？回答好这10个问题征服面试官

之前UI黑客发表了一篇叫《面试了50多位UI设计师，我总结了这些求职技巧》的文章，在网上得到很多设计师认可，感谢各位支持。

00

哥伦比亚大学研究发现：出生月份的确会影响健康

摘自：煎蛋网站：http://jandan.net/ 研究发现，你出生的月份确实会影响你患病的可能性。研究人员利用软件来寻找出生月份与发病率之间的关系，他们利用算法检测了纽约市医疗数据库之后，发现55种疾病与人们出生的季节之间存在着联系。这份来自哥伦比亚大学的研究表明，五月份出生的人患病率最低，出生在十月份的人患病率最高。该研究发表在美国医学信息学协会期刊上。研究作者Nicholas Tatonetti表示研究数据能帮助科学家们发现新的疾病影响因素。早期专注于多动症和哮喘的研究表明出生季节和发病率

04

使用纯CSS给网站文章中的外链添加小图标

最近突然有一个想法，文章中的链接不够明显，可不可以在不修改类名的前提下，给所有 a 标签添加一个图标呢？

05

读唇术OUT了！在喉咙安装传感器，通过皮肤震动录入声音！东大索尼共同研发

这可不是特工电影里某个天马行空的高科技，最近，东京大学和索尼计算机科学研究所（CSL）共同研发出AI系统“Derma”就能实现上述功能，通过将传感器贴合在喉咙周围的皮肤上，就能实现从口形(无声说话)到语音的转化。

02

MBAS2024——多类别双心房分割挑战赛

心房颤动 (AF) 是最常见的心律失常形式，与大量的发病率和死亡率相关。由于缺乏对直接维持人类心房中房颤的潜在心房解剖结构的基本了解，目前房颤的临床治疗效果不佳。近年来，晚期钆增强磁共振成像（LGE-MRI）被广泛用于研究纤维化/疤痕，利用LGE-MRI对房颤患者进行的临床研究表明，心房纤维化的程度和分布可用于可靠地预测消融成功率。因此，直接分析AF患者的心房结构对于提高对AF的理解和针对患者的针对性治疗至关重要。

01

iconfont字体图标库

HTML5学堂小编的话：昨日发布的iconfont的内容有些不足，对于可能不太了解iconfont和特殊字体的学习者来说，可能会存在一定的理解问题，在此针对昨日内容进行补充，详细讲解。字体相关知识了解iconfont（字体图标）前我们先了解下字体，因为iconfont的实现与字体息息相关，所以掌握字体相关知识便于理解iconfont。接下来看一个简单的例子 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5Course

06

uniapp 中使用 iconfont

4、在步骤2解压的文件中执行命令行（shift+右键打开powershell 窗口也行）

01

吴恩达论文登上Nature Medicine！利用神经网络诊断心率不齐

ECG 是医疗实践中的基础工具，全世界每年有超过 3 亿张心电图，它在诊断心律不齐过程中起关键作用。近日，吴恩达团队在 Nature Medicine 上发表了一项研究，开发了一种深度神经网络，可基于单导程 ECG 信号分类 10 种心率不齐以及窦性心律和噪音，性能堪比心脏病医生。

04

使用纯CSS给网站文章中的外链添加小图标

最近突然有一个想法，文章中的链接不够明显，可不可以在不修改类名的前提下，给所有 a 标签添加一个图标呢？

03

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

字体文件转化成base64格式解压压缩包 ---- 找到ttf格式文件 ---- 上传到平台转化为base64格式 ---- 下载压缩包 ---- 将css文件名改为wxss ---- 放入项目文件夹 ---- 用@import全局引入 ---- 使用

01

Vue项目中优雅使用icon

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

02

字体图标iconfont的使用

fontClass 支持字体的样式定义，但不支持多色字体，兼容性良好，当要替换图标时，只需要修改 class 里面的 Unicode 引用。只需要 html 和 csss。

02

在小程序框架 wepy 中使用 iconfont 图标字体

mpvue 跟 wepy 真的很难抉择，我目前没有兼容多平台的需求，所以直觉告诉我还是用 wepy 吧~

02

基于Vue2.x的UI组件库引入Iconfont图标库（引入第三方图标库篇）

本篇笔者将讲解在Vue项目中如何引入第三方图标库，如：Inconfont https://www.iconfont.cn fontawesome https://fontawesome.io/ 登录到Iconfont官网，然后选择你想要的图标，添加到购物车里。最后添加到你的项目里。

01

微信小程序----icon组件

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！效果图原生的icon组件的属性 WXML <view class="icon-group"> <icon wx

02

openlayers4中用font设置图标样式

font其实是个好东西，不论是写css还是。。。，这不，牛老师想把它用在openlayers4中，用以很方便的设置图标的大小、颜色，还不失真，东拼西凑，终于算是完成了。

01

如何编写fis3插件

目前业务正在逐步迁移到fis3和lego，有许多和业务相关的fis插件需要处理。 fis 编译流程官方的这张图，对fis的构建流程讲述的很清楚了，主要包括单文件编译和打包，业务中的插件也主要是这两

00

Vue项目使用iconfont图标库

最近一直在更新Vue项目中配置及使用一些内置的方法，今天讲一讲Vue项目中使用iconfont图标库，不管是管理平台还是官网展示之类的显示页面，都会用到一些小图标，如果我们用img标签，那我们的资源库会非常的大，而且后期如果我们针对图标调整大小，改色等之类的操作，就需要用到Photoshop等专业类工具，上手困难不说，而且比较麻烦，下面就说下Vue使用iconfont图标库。

Nvidia与Scripps合作研究AI在基因组学处理和分析中的作用

Scripps Research Translational Institute（SRTI）是一家非营利性研究机构，与Nvidia合作开发基于AI的基因组学处理和分析工具。在今天宣布的合作伙伴关系中，Nvidia数据科学家将与Scripps基因组学专家和生物信息学家共同研究“端到端”的医疗保健问题。

01

《从案例中学习JavaScript》之酷炫音乐播放器（一）

序接触简书也有一段日子了，这中间的时光还是比较轻松加愉快的，那种可以和他人分享知识的欣喜和愉悦的确是非常棒。我一向都是觉得专心写自己的文就可以了，不会总是纠结有多少人在看，有多少点击等等。用心写好自己的文，体会那种分享的快乐，就可以了。之前写的《js常用方法和一些封装》系列暂且告一段落，接下来，我会通过各种案例，来分享javascript的各种技巧，所以最终将这个系列的名称定为：《从案例中学习JavaScript》,回想到自己初学编程时候的各种艰辛，买了很多书，然而这些书大多为泛泛而谈，或者东拼西凑。市

09

如何编写fis3插件

官方的这张图，对fis的构建流程讲述的很清楚了，主要包括单文件编译和打包，业务中的插件也主要是这两种，至于是pre还是post，差别不是特别大。主要记住一点区别：单文件编译阶段，无法获取文件之间的关联信息；打包阶段，能够拿到项目的所有文件

01

vue.js客服系统实时聊天项目开发（四）引入iconfont图标代码

实现的效果如图，在开发唯一在线客服（gofly.v1kf.com）时，使用图标按钮

02

vue中使用iconfont

第一步：进入官网，注册--登录阿里巴巴矢量库第二步：图标管理---我的项目--创建项目---新建新建项目第三步：进入图标库--官方图标库开始选择图标第四步：选中图标-- 添加入库--

02

无图片字体icon

W3C 仍然在对 CSS3 规范进行开发。不过，现代浏览器已经实现了相当多的 CSS3 属性。CSS3也从前几年的初试探到如今的广泛应用。最近折腾这方面的东西其实挺多，但一直懒于写blog，也经常会出现一些知识点重复去查询，一些知识点难以及时分享与讨论。ADT团队在不断的成长与壮大中，于是鞭策自己尽量多的习惯去记录，也为了知识更好的分享与积累吧。现在来看，应该大家都接触过css3的自定义字体（@font-face），也应该知道各个浏览器都支持（包括IE6），只是各自对字体文件的格式的支持不一样。为什么要

09

微前端框架qiankun项目实战（二）--踩坑与部署篇

在上一篇《微前端框架qiankun项目实战（一）--本地开发篇》发布后，感谢有网友提出了微应用的缓存问题，的确基于第一篇使用的registerMicroApps方式很难做到缓存，要做到应用缓存的方式使用手动加载管理微应用的方式是最好的，我将再写一篇补充篇使用loadMicroApp手动管理微应用，本篇我会模拟部署一下主应用和微应用，并将揭开我上一篇所谓的巨坑是什么。

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭