使用iconfont中图标后，大小显示不一致

已于 2022-05-25 17:14:55 修改
阅读量3.3k 收藏 8
点赞数 10
分类专栏： Vue.js 文章标签： vue javascript vue.js react.js
于 2022-03-19 17:25:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44067347/article/details/123597155
版权

能看到这篇文章的小伙伴们，大概率是遇到了与博主相同的问题了，组件库中的icon（图标）不满足需求，使用iconfont 中的图标，但是引入看到效果之后，瞬间就是一句国粹。。。

咱们看下面：明明设置了相同尺寸，但是各自显示各自的大小，为啥会出现这样的情况？

在这里插入图片描述在这里插入图片描述在这里插入图片描述
使用Chrome检查一下，究竟问题出现在了哪里？

在这里插入图片描述
原来如此，

我们尽管给图标设置相同尺寸，但并不能确保里面内容的就会按照我们设置的大小100%的填充满，这样就导致我们引入后，看到的图标大小不一。

那么如何解决呢？

  1. 首先把所有图标添加至同一个项目下
    在这里插入图片描述
  2. 把鼠标放到图标上，选择【编辑】
    在这里插入图片描述
  3. 以【笑脸】icon为例，它并没有按完全填充满
    在这里插入图片描述
  4. 项目所有的icon 全部按照【此步骤】进行调整即可统一大小。

在这里插入图片描述
在这里插入图片描述

  1. 还有最重要一步，一定要【批量去色】，不然【color 】属性无效
    在这里插入图片描述
唐璜Taro
关注
  • 10
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
专栏目录
flutter-iconfont-cli:在flutter中使用iconfont图标，不依赖字体，支持多色彩
05-06
用纯JS把iconfont.cn的图标转换成Flutter Widget，不依赖字体，支持多色彩 特性 1、纯组件，不依赖字体，体积小 2、支持渲染多色彩图标，支持自定义颜色 3、自动化生成图标组件 Step 1 在项目文件pubspec.yml中加入...
iconfont使用教程
04-10
iconfont 使用教程 前端所用资源 iconfont 使用教程 前端所用资源
CSS，font awesome和iconfont引入图标，并改变图标大小，颜色的方法
liangyuexixi的博客
08-04 1万+
1.font awesome （1）在官网上下载图标库文件 （2） 代码 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Document</title> <linkrel="stylesheet"href="../font-awesome-4.7.0/css/font-awesome.mi...
iconfont 字体图标font-size低于12px不适用问题
xiyan_yu的博客
07-13 597
iconfont 字体图标font-size低于12px不适用问题
html 字体图标大小,CSS > ICONFONT 基线和大小问题
weixin_35600779的博客
06-04 1276
N的域近处上近处上近处上近处上近处上近处上ote. It is recommended that implementations that use OpenType or TrueType fonts use the metrics "sTypoAscender" and "sTypoDescender" from the font's OS/2 table for A and D (after ...
从阿里巴巴icon引入图标到微信小程序（可以改变大小，颜色）
weixin_45439010的博客
08-01 1689
首先到阿里巴巴官方icon图标库选择自己喜欢的图标并且加入图购物车 点击网站左上角的购物车按钮再点击添加至项目 把文件解压以后我们需要这个iconfont.css文件，把他的后缀名改成.wxss 后复制到我们自己的项目中 我这里是新建了一个文件夹 然后在app.wxss中引入@import ‘styles/iconfont.wxss’; 这时候回到iconfont的购物者页面，把你刚刚生成的在线链接替换掉confont.wxss中的@font-face 这时候在页面总就可以使用了，并且可以利用字
iOS中如何使用iconfont图标实例详解
08-27
iconfont大家在开发中应该会经常用到，下面这篇文章主要给大家介绍了在iOS中如何使用iconfont图标实例的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧
webpack中使用iconfont字体图标的方法
08-27
下面小编就为大家分享一篇webpack中使用iconfont字体图标的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue中使用ElementUI使用第三方图标库iconfont的示例
10-17
主要介绍了Vue中使用ElementUI使用第三方图标库iconfont的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Android中正确使用字体图标(iconfont)的方法
09-01
IconFont字体不仅仅流行于Web开发，在移动开发中也渐渐的使用的范围...这篇文章主要介绍了在Android开发中使用icon font的代码和方法。对大家学习使用iconfont有一定的参考借鉴价值，有需要的朋友们下面来一起看看吧。
Iconfont
僵小蛋的博客
01-12 3817
Iconfont 是指用字体文件取代图片文件，来展示图标、特殊字体等元素的一种方法。很多网站都会用它，比如手淘、新浪微博等。 在使用它之前，先来了解一下它的优缺点： 优点：（1）文件加载体积小；（2）可以直接通过css的font-size，color修改它的大小和颜色，对于需要缩放多个尺寸的图标，是个很好的解决方案；（3）支持一些css3对文字的效果，例如：阴影、旋转、透明度；（4）兼容低版本
iconfont的使用，阿里矢量图库的引用，配置，改变图标大小和图标颜色
热门推荐
qq_36641107的博客
03-03 7万+
怎么使用iconfont首先找到自己想要的图标，添加到购物车如果你只要一个图标的话，或者确保之后这个项目不需要其他的图标的话，可以直接选择下载代码，但是你有多个图标的话，最好选择添加至项目无论是添加项目还是直接下载代码，下载之后会有一个download.zip包，解压之后的文件如下图，前面四个文件就是官网的demo没有用的，后面五个才是有用的现在请把iconfont.css放在你常用的css文件目...
CSS > ICONFONT 基线和大小问题
weixin_34114823的博客
09-27 1482
根据 W3C 标准： Note. It is recommended that implementations that use OpenType or TrueType fonts use the metrics "sTypoAscender" and "sTypoDescender" from the font's OS/2 tabl...
iconfont
Gckkoo的博客
12-24 516
Icongont：是什么？ Icon：是图标的意思， Font：是字体的意思， Iconfont的意思就是字体图标
iconfont里面svg的全局配置
W18223596054的博客
03-28 346
/ 1. 图标的名字（icon） 2. 图标的颜色（color）3.图标的大小（size）3. customStyle（用户配置的sty）// 如果style与customStyle有属性的冲突，谁在后面以谁为主。// 12的数字（给他加一个px） 12px （不管）// 对于应用类型，必须要写成函数返回的方式。// 填充（颜色），去自己的颜色进行填充， 取父级。// 用户自定义的行内样式。// 如果用户传了size。// 如果用户传了颜色。// 定义一个props。
android字体用色,android中IconFont图片字体使用可更改大小，颜色
weixin_39553156的博客
05-25 433
IconFont阿里妈妈MUX倾力打造的矢量图标管理、交流平台。适用于Web、Android、IOS，官网地址。Android中使用IconFontAndroid使用说明官网android可以直接使用单个icon(svg,png)。也可以直接引入字体应用。第一步从iconfont平台选择要使用到的图标，添加到购物车后统一归类到自己创建的项目文件夹中并下载至本地；复制字体文件iconfont.ttf...
nuxt解决首屏加载慢问题_干货：网站加载太慢？从图片入手
weixin_39599081的博客
11-21 1054
互联网愈来愈发达，在网站的页面中的图片越来越多，而当用户打开页面的时候，用户只能看到首屏的内容和图片，非首屏图片对用户来说，是没有意义的。如果我们不做图片做任何处理，那用户打开页面的时候，浏览器会加载页面上的所有图片资源。这无疑会增加页面展示时间和其他功能的使用，这也是导致网站加载过慢的原因之一。人们的智慧是无限的，为了解决这一问题，图片懒加载的技术随之兴起。首先，让我们看一个栗子:这是一个常规电...
iconfont字体图标的使用方法
qq_31432773的博客
06-04 387
我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐,自己弄明白后感觉如此简单,做了这么个简单教程,直接上图,简单粗暴,避免新手走弯路,这里讲解的默认是元素使用类名; step 1:百度iconfont,找到阿里巴巴矢量图标库官网,然后注册登录,或者用github登录也行,此步骤跳过; step 2:找到图标管理->我的项目->然后新建项目:
vue项目改图标_vue使用自定义icon图标的方法
weixin_39766071的博客
12-19 3581
首先因为elementUI提供的icon太少了，所有自己找找有没有矢量图可以补充的，尝试多种方法，觉得下面方法简单易懂，分享给大家效果图：推荐使用阿里爸爸矢量图标管理，iconfont使用方法 登录账号，找到需要的图标加入购物车然后添加到项目再然后下载代码到本地下载代码文件然后解压出现这列表打开HTML文件，引用方法教程补充我人的坑，之前想着在style标签里@import ""，结果一直报错，试...
uniapp tabber 图标点击后大小不一致
最新发布
07-14
您好！对于UniApp的TabBar图标大小不一致的问题，可以尝试以下几种解决方法： 1. 使用统一大小的图标：确保所有的TabBar图标都使用相同的大小，这样可以避免大小不一致的问题。 2. 使用自定义图标字体：UniApp支持使用字体图标，可以选择一个字体图标库，将图标作为字体文件引入，然后通过类似于`<text class="iconfont">图标代码</text>`的方式来使用图标。这样可以保证所有的图标大小一致。 3. 使用CSS样式控制图标大小：通过在TabBar图标的样式中添加`width`和`height`属性，设置统一的宽高值，来控制图标的大小。 4. 使用图片剪裁工具：如果TabBar图标是使用图片的形式，可以使用图片剪裁工具将图片剪裁为统一的大小，然后再使用。 希望这些方法能帮助您解决TabBar图标大小不一致的问题！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值