我有一个问题，当伟大的旋转字体图标 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

有同学问了我一个很多前端都在担忧的问题

如图，这是今天一个先行者计划的成员，在同我聊天的时候提到的问题。这个问题确实是客观存在的，前端变化快，一会今天这个了，一会明天又那个了。...“我都有点动摇了，我原来还总鼓励他们别放弃，搞一阵之后自己也有想法了” 我在微信是这样回复他的，其实你细看，前端变的都是上层建筑，什么vue啊，react啊，这那的，，但这些框架都是对原生js的再封装...只要你原生 js很ok，那么你学习新框架是很快的。就例如我，我原生 js很ok，所以我学什么新的框架，都很快。一个新框架出来，无非是一套新js语法而已，核心还是那些。...前端无论怎么变，永远只有一个js，其它的那些东西，都是在js的基础之上，再封装。jq解决dom兼容性，vue,react解决dom操作，但根上呢？...后端有后端的好处，学会一个j2ee可以吃很多年。但前端最大的优势在于，只要你比别人快，你就会有很大的优势。这一点就如同现在的中国，唯一不变的就是变化。

1.1K8 0

iconfont矢量图标旋转晃动

标签：css3 前端 iconfont旋转 iconfont字体图标旋转动画晃动问题描述：项目中使用了iconfont字体图标做旋转动画，就是类似loading加载之类的动效，发现转动起来会出现晃动问题...2.问题探索经我打开控制台仔细查看发现，我给这个icon-181元素 (即这个字体矢量图标的父元素)设置的font-size是20px，可是显示的字体矢量图标元素大小却是20*21。...按说应该是20*20的，这个矢量图标却莫名的多出了1px的像素高度。觉得可能是这个问题导致的旋转晃动，这种情况有可能是它做成iconfont字体矢量图标运用后出现的。...期间，我试探出了一个能勉强解决的办法。...是不是我使用的这个svg图像有问题，导致了它转换成字体矢量图标以后出现了这样的情况？

5.1K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

CSS笔记(16)

精灵图一个网页中往往会应用很多小的背景图片作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度....此时,有一种技术的出现很好的解决了以上问题,就是字体图标iconfont. 字体图标可以为前端工程师提供一种方便高效的图标使用方式,显示的是图标,本质属于字体....字体图标的优点: 轻量级:一个图标字体要比一系列的图像要小,一旦字体加载了,图标就会马上渲染出来,减少了服务器请求. 灵活性:本质其实是文字,可以随意的更改颜色,产生阴影,透明效果,旋转等....字体图标下载: icomoon字库阿里icofont字库如何使用字体图标: 这个比较麻烦,我一步一步讲解....我们先打开demo文件: 里面有我下载好的图标. 复制想要的图标后面的小长方形,粘贴到span中.

6282 0

Web前端知识体系精简——CSS 篇

2、定位定位一般有相对定位(relative)、绝对定位(absolute)、固定定位(fixed)，relative和absolute在移动端用的最多，fixed 在移动端有兼容性问题，因此不推荐使用...还有一个问题是计算盒子的大小，需要注意的是，box-sizing属性的设置会影响盒子的width和height。只有普通文档流中块框的垂直外边距才会发生外边距合并。...5、Flex布局 Flex布局的容器是一个伸缩容器，首先容器本身会更具容器中的元素动态设置自身大小;然后当Flex容器被应用一个大小时(width和height)，将会自动调整容器中的元素适应新大小。...8、Sprite图对于大型站点，为了减少http请求的次数，一般会将常用的小图标排到一个大图中，页面加载时只需请求一次网络，然后在css中通过设置background-position来控制显示所需要的小图标...9、字体图标iconfont 所谓字体图标就是将常用的图标转化为字体资源存在文件中，通过在CSS中引用该字体文件，然后可以直接通过控制字体的css属性来设置图标的样式。

1.3K8 0

实战为王，从零封装 Icon 组件

大家好，我是这波能反杀，一个 React 超级高手，关注我，你也可以成为高手. 本文是 React 知命境系列理论结合实践，是非常有效的学习方式。也是本书一直倡导并推行的法则。...到了现在，字体图标早已经不是什么黑科技了，它几乎被普及到了所有网站。在 CSS3 中，有一个语法可以自定义字体 @font-face。如果字体库是由图标组成，那么我们就可以创建字体图标了。...我们也可以将字体图标库下载下来，把url中的路径都修改为对应的字体库文件就行。可以看到，每一个图标除了有一个对应的名字之外，还有一个唯一的unicode码。&#x表示他们后面跟的是16进制数字。...例如 refresh 刷新图标，点击时才旋转，刷新完成就停止旋转。因此我们要专门针对这种情况做特殊处理。添加一个是否旋转的控制属性。我准备的图标库里所有图标遍历渲染到页面上结果如下

1.3K2 0

三种 Loading 制作方案

当stroke-dashoffset值为负数的时候，上面的线往右拉，当stroke-dashoffset值为正数的时候，下面的线往右拉。 ?...三、通过iconfont字体图标我们可以直接通过iconfont字体图标代替圆环的绘制，直接以字体的形式显示出圆环，然后给其加上旋转动画即可，如：我们可以在iconfont网站上下载喜欢的Loading...字体图标下载后，将解压后的内容拷贝到项目中，并引入其中的iconfont.css到页面中，给要显示字体图标的元素加上iconfont类样式，字体图标会有一个对应的unicode编码，通过::before...设置content为该unicode编码即可显示对应的字体图标了，或者直接在unicode码前加上\&#x，并作为元素内容。...接下来让字体图标旋转起来即可，如: .icon-loading { animation: rotating 2s infinite linear; } @keyframes rotating {

3.3K1 0

CSS进阶

字体图标字体图标，显示的是图标，本质是字体。...开源字体图标库： iconfont-阿里巴巴矢量图标库下载后文件重命名为iconfont 使用步骤：引入字体图标库（引入css...文件）通过两个类名（ iconfont 要引入的字体图标类名）来展示想要的字体图标字体图标。...步骤：准备一个盒子是一张精灵图的大小改变背景图的位置 bgp（移动的距离就是整个精灵图的大小）添加速度曲线 step(N) N是一共有几张小图

9452 0

【CSS3】css开篇基础（5）

当然，如果在阅读中发现任何问题或疑问，我非常欢迎你在评论区留言指正️️。让我们共同努力，一起进步！加油，一起CHIN UP！...精灵图的优点很多，但是缺点也很明显 1.图片文件还是比较大的 2.图片本身放大和缩小会失真 3.一旦图片制作完毕想要更换非常复杂此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont...3.字体图标iconfont 字体图标使用场景：主要用于显示网页中通用、常用的一些小图标。...优点：轻量级：一个图标字体比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来，减少了服务器的请求灵活性：本质其实是文字，可以很随意的改变颜色，产生阴影，透明效果，旋转等兼容性：几乎支持所有的浏览器...如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。

851 0

写一款小众的 flutter 图标包

TrueType 字体是 Mac OS X 和 Windows 上最常用的字体格式。我不知道其他类似的格式如 “.svg”, “.eot” 或者 “.woff” 是否都可以使用。...我在 GitHub 上发现了一个名为 weather-icons 开源 CSS 图标库。这是一个包含了 222 个精美天气主题的图标库。 Flutter 包 ?...这样我们就可以在我们的 dart 文件中使用图标了。 ? 终于迈出了伟大的一步！现在我们来关注一下 dart 代码。难点 ? 在 lib/ 目录中创建一个 src/ 文件夹。...我们首先找到一个合适的 JSON 文件，他包含所有十六进制代码和名称。找到它，或者使用 web 抓取一个。这部分不是我做的，是 Nikhil 做的。这是一个简单的 JS web 爬虫。...你可以在这里找到 font_generation 的完整代码和我想的一样。这将生成一个看起来像下面这样的文件。 ? 发现这一点后，我和 Nikhil 都做了一堆字体图标包。

1K1 0

都0202年了你还不会用字体图标？

字体图标就是为了解决这些问题而来字体图标的优点： 1，可以做和图片一样的事情，如改变透明度，旋转等 2，字体图标本质是文字，可以改变其字体颜色，设置阴影等 3，字体图标体积更小 4，兼容性强，几乎支持所有浏览器...字体图标使用流程 1.UI人员设计字体图标效果图.svg格式——-> 2.上传生成兼容字体文件包——-> 3.下载字体包——-> 4.将字体包引入到HTML文件一般可省略前两部直接从第三方网站免费下载即可...“可选择你自己的svg图用于转换为字体图标成功添加一个字体图标除此之外，你还没有选择此网站中其他图标选择完成点击下载成字体图标生成字体图标，点击下载生成字体包将fonts...目录下的字体复制到我们的项目中，其余文件不要删完成上述操作后我们可应用在我们的HTML文件中 1.由于我们的机子及用户的机子是没有这个字体文件的，我们要先声明字体 /*声明字体*/ @font-face...复制箭头指向即可，这里有两种方式，如果你复制了图标那么直接粘贴到标签中即可  在编辑器我们看到的是空格浏览器打开由于是字体我们可以设置颜色，大小等 span

4101 0

字体图标

我们后面会学习移动端响应式，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术出现了，这就是字体图标（iconfont)....字体图标优点可以做出跟图片一样可以做的事情,改变透明度、旋转度，等.. 但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等... 本身体积更小，但携带的信息并没有削减。...上传生成字体包当UI设计人员给我们svg文件的时候，我们需要转换成我们页面能使用的字体文件，而且需要生成的是兼容性的适合各个浏览器的。...推荐网站： http://icomoon.io icomoon字库 IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。...推荐网站： http://www.iconfont.cn/ 阿里icon font字库 http://www.iconfont.cn/ 这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库

3.8K2 0

前端成神之路-品优购项目(一)

它是图标形式，不是一个图片位置是放到 head 标签中间。后面的type=“image/x-icon” 属性可以省略。（我相信你也愿意省略。）...字体图标图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。...此时，一个非常重要的技术出现了，额不是出现了，是以前就有，是被从新"宠幸"啦。。这就是字体图标（iconfont). 1. 字体图标优点可以做出跟图片一样可以做的事情,改变透明度、旋转度，等.....上传生成字体包当UI设计人员给我们svg文件的时候，我们需要转换成我们页面能使用的字体文件，而且需要生成的是兼容性的适合各个浏览器的。 ...在样式里面声明字体：告诉别人我们自己定义的字体(一定注意字体文件路径的问题) @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot

1.7K2 0

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

但是这种方法有三个明显的缺点：造成大量http请求；不方便修改颜色；放大图片会虚。 B）后来有聪明的工程师发明了精灵图，什么是精灵图？这是一个字译。...当浏览器渲染一个汉字（英文字符也是一样）的时候，首先看font-family样式，确定字体名，由字体名确定使用电脑里的哪个字体文件；接着以汉字的unicode在字体文件里查找对应的字符信息。...字体类型有两类：点阵字体和矢量字体。现在使用最广泛的是矢量字体。...假如我们想自定义图标怎么办？对于“晴”这个图标，在iconfont这个网站上可以直接进行简单的编辑，包装位移、大小、旋转、颜色等设置。 ?...如果遇到了类似的问题，可以用这两个方法试一下，如果仍然有问题，欢迎找我讨论。 5）weui组件库里的icon组件的图标，如何取出来，保存到本地？ ?

2.1K0 0

Ways to Use Icons on Android (2)

(制作图标字体的方法有很多，可以参考这里，本文主要介绍的是如何快速利用已有的图标制作字体文件然后在应用中使用) 1.Fontello: icon font generator Fontello网址：http...如下图所示，我添加了两个Custom Icons，从Fontelico中选了6个图标，从Font Awesome中选了3个图标等，最终导出得到的图标字体文件就会包含这些我需要的图标。 ?...下载之后得到一个zip文件，解压之后打开demo.html可以看到该图标字体中的所有图标的名称和对应的Unicode ? ?...方法最后添加初始化操作 Iconify.with(new FontelloModule()); 运行应用看到效果见文章末尾的截图，图标可以设置为旋转效果的哟，有点炫啊！...从上面的分析可以看出，图标字体文件的制作以及利用字体文件对Iconify进行扩展都还比较简单，唯一比较麻烦的是，如果项目中使用了大量的图标的话，编写图标集合的枚举类会比较无聊，所以下节可能会开发一个小脚本或者小插件来完成这个无聊的任务

6231 0

Refactoring UI

细节在后在设计新功能的最初阶段，重要的是不要纠结于字体、阴影、图标等低层次的决定这些东西最终都会变得重要，但现在并不重要可以试着画草图来忽略细节 # 克制颜色即使已经准备好用更高的保真度来完善一个创意...当文字变大时，你的眼睛就不需要那么多帮助了对于大标题文字，你可能不需要额外的行距，行高为 1 就完全没问题了行高和字体大小成反比--小字体使用较高的行高，大字体使用较矮的行高 # 并非每个链接都需要颜色...， 100% 表示完全饱和如果没有饱和度，色相就无关紧要了--当饱和度为 0% 时，旋转色相实际上根本不会改变颜色亮度（Lightness），衡量一种颜色与黑色或白色的接近程度，取值范围为...聘请专业摄影师使用高质量的图片库 # 文字需要一致的对比度 # 背景图像的问题照片可能非常动态，有很多非常亮的区域，也有很多非常暗的区域要解决这个问题，需要减少图像的动态效果，使文字和背景之间的对比更加一致...# 不要放大图标虽然矢量图像的质量确实不会因为尺寸的增大而降低，但绘制尺寸为 16-24px 的图标在放大到 3 倍或 4 倍时，看起来永远不会非常专业如果你只有小图标，可以尝试将它们围在另一个形状内

9223 0

HTML5和CSS3 WEB技术开发

fixed：背景图相对于视口固定，所以随页面滚动背景不动，相当于背景被设置在了body上第十一章字体图标 1.字体图标使用场景：主要用于显示网页中通用,常用的一些小图标精灵图是有很多优点的,但是缺点很明显...2.图片本身放大和缩小会失真 3.一旦图片制作完毕想要更换非常复杂此时，有一种技术的出现很好的解决了以上问题。就是字体图标iconfont. 字体图标可以作为前端工程师提供一种方便高效使用方式。...展示的是图标,本质属于字体。 2.优缺点优势轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，不需要下载一个个图像。...劣势图标字体只能被渲染成单色，或者是CSS3的渐变色版权上也有着对应的限制，当然还是有很多免费的图标字体可以供我们下载。...当自己创作图标字体的时候，是比较耗费时间的，重构人员的后期维护成本也比较高 3.使用 3.1 字体库 https://icomoon.io/ IcoMoon是一个在线的图标字体生成器。

1171 0

05_CSS进阶技巧

图片文件比较大图片本身放大缩小会失真一旦图片制作完毕想要更换，比较复杂此时，有一种技术的出现，很好的解决了以上问题，就是字体图标 iconfont 字体图标可以为前端工程师提供一种方便高效的图标使用方式...3.2 字体图标的优点轻量级：一个图标字体比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来，减少了服务器的请求灵活性：本质其实是文字，可以很随意的改变颜色，产生阴影，透明效果，旋转等兼容性...3.4 阿里 iconfont 字体图标 3.4.1 新建项目在顶部菜单栏找到->资源管理->我的项目->新建项目右边点击新建项目，用于保存自己常用的图标 3.4.2 添加购物车项目新建完成后，需要往项目里添加我们要想使用的图标...使用图标首先标签添加一个 iconfont 类名再给标签添加一个图标对应的类名图标大小通过 font-size 来调整 4 CSS 用户界面样式 4.1 什么是界面样式所谓的界面样式，就是更改一些用户操作样式...（了解）多行文本溢出显示省略号，有较大的兼容性问题，适合于 webKit 浏览器或移动端（移动端大部分是webKit内核） overflow: hidden; text-overflow: ellopsis

681 0

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

接下来我们开始制作播放按钮：默认图标的颜色是黑色，而且字体很小，我们需要对这个图标进行css样式美化和绝对定位。接下来，我们给这个播放按钮添加一个点击事件，点击之后就播放一首歌曲。...然后，在body区域随便添加一个audio标签，用于播放音乐。在项目根目录新建一个mp3文件夹，专门用来存放歌曲：现在编写playMusic方法，去播放01.MP3。...接下来做一个音乐播放时候的旋转效果，用css3中的keyframes来做。当点击播放按钮的时候，就给当前对象（i标签）添加一个旋转的class。完成！

4593 0

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

但是如果我告诉你，有一个东西，它已经为你准备了非常多的常用icon图标（还在不断更新），能大能小，能随便修改颜色，完全开源，完全免费，你会不会心动？...2.4 其他应用 fontAwesome还有其他更加复杂一点的应用，包括固定宽度、浮动、反转、旋转、叠加图标等。...在WPF中使用FontAwesome之类的字体图标在WPF程序中，一般接触到的矢量图标资源有XAML、SVG、字体这三种格式。...FontFamily的设置，我是采用的嵌入字体的方式，这样在没有装该字体的机器上也是能正确显示图标的。...但这里有一个小的知识点就是：一般来说，fortawesome之类的图标字体中图标对应的文字都是不可以通过输入法直接输入的，只能直接输入Unicode编码，WPF在XAML中使用Unicode编码输入的方式和

2.1K2 0

Ways to Use Icons on Android (1)

本系列估计也会有三篇文章，结合实践分享下我的摸索过程，也许大家会觉得有用呢。本节主要从Material Design图标入手，介绍它的几种使用姿势。...、IconButton、IconToggleButton以及IconDrawable等，核心实现在ParseUtil类中，它的compute方法会去解析设置的文本内容，从中提取出不同字体对应的图标，甚至设置其大小和颜色以及旋转动画效果...如果想要扩展Iconify，只需要一个ttf字体文件和实现IconFontDescriptor接口的类就行了，可以参考Font Awesome的图标字体集合的实现。...为了方便使用，一般还会添加一个枚举，列举出这个图标字体集合中所有图标的key和character对应关系，以Font Awesome图标字体为例： public enum FontAwesomeIcons...我比较喜欢Iconify的使用方式，简洁好用，嘿嘿，欢迎推荐其他的Material Design图标的使用姿势！

4932 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭