tokenpocket中国官网下载|为什么很多语句上带着icon

百度安全验证

百度安全验证

网络不给力，请稍后重试

返回首页

问题反馈

百度安全验证

百度安全验证

网络不给力，请稍后重试

返回首页

问题反馈

网络用词ICON是什么意思？ - 知乎

网络用词ICON是什么意思？ - 知乎首页知乎知学堂发现等你来答​切换模式登录/注册互联网图标计算机网络网络语言网络用词ICON是什么意思？关注者5被浏览81,912关注问题​写回答​邀请回答​好问题​添加评论​分享​3 个回答默认排序叫我小霸王鸭正在创做Github开源项目​ 关注icon是一种Windows系统下的一种文件格式，类似的有*.ico、*.icon是一种图标文件，相比于jpg和png空间更小但清晰度较低发布于 2021-05-13 12:30​赞同 6​​添加评论​分享​收藏​喜欢收起​拾二万紫千红，拾之一二​ 关注不同语境表达意思不一1、按目前网络流行梗的用法，与idol相似，但ICON更具有模范性和标签性，从这点上讲icon>idol2、对前述词起强调作用3、icon在设计语言里是图标的意思，每个网站及APP都有自己的icon，通常与logo相近。编辑于 2021-06-23 19:48​赞同 2​​添加评论​分享​收藏​喜欢收起​​

为什么很多文章里面都有icon或者其它的单词？ - 知乎

为什么很多文章里面都有icon或者其它的单词？ - 知乎首页知乎知学堂发现等你来答​切换模式登录/注册Icon Font为什么很多文章里面都有icon或者其它的单词？看了很多文，这种情况存在于不同作者不同的回答之下，这到底是什么原因造成的？反而这个英语单词和上下文没啥关系。显示全部 ​关注者2被浏览2,780关注问题​写回答​邀请回答​好问题​添加评论​分享​1 个回答默认排序老猫工地狗/游戏宅/啥都喜欢，啥都不精​ 关注盗文的时候网站代码没有清理干净发布于 2022-07-24 09:13​赞同 3​​1 条评论​分享​收藏​喜欢收起​​

百度知道 - 信息提示

百度知道 - 信息提示

百度首页

商城

注册

登录

网页

资讯

视频

图片

知道

文库

贴吧采购

地图更多

搜索答案

我要提问

百度知道>提示信息

知道宝贝找不到问题了>_

该问题可能已经失效。返回首页

15秒以后自动返回

帮助

 | 意见反馈

 | 投诉举报

京ICP证030173号-1   京网文【2023】1034-029号     ©2024Baidu  使用百度前必读 | 知道协议 

为什么现在文案在人名的后面非得加个icon，神烦啊！？ - 知乎

为什么现在文案在人名的后面非得加个icon，神烦啊！？ - 知乎首页知乎知学堂发现等你来答​切换模式登录/注册文案网站文案热点话题为什么现在文案在人名的后面非得加个icon，神烦啊！？36度叭叭叭关注者8被浏览13,127关注问题​写回答​邀请回答​好问题 2​1 条评论​分享​2 个回答默认排序sameme工程统筹师​ 关注low到爆，看到也烦，我怀疑是固定题词器搞出来了，最近微博一堆xxxicon……发布于 2021-12-17 00:46​赞同 5​​2 条评论​分享​收藏​喜欢收起​烟花易冷​ 关注真想给这些人一个大比兜，是什么毛病啊？名字非加个icon发布于 2023-08-11 12:56​赞同 2​​1 条评论​分享​收藏​喜欢收起​​

UI设计-Icon基础知识（一） - 知乎

UI设计-Icon基础知识（一） - 知乎首发于设计切换模式写文章登录/注册UI设计-Icon基础知识（一）渔夫​招聘亚马逊运营，欢迎滴滴我只是一个搬运工。。。。。。ICON 的定义 提到 ICON 明确的定义，搜索结果告诉我们，ICON 指有明确含义的图形视觉语言。这告诉我们它的首要目标就是代替文字，用图形化的语言来传达信息。但是这个定义会让我们容易与 LOGO 相混淆，那如何区分 LOGO 和 ICON 呢？他们虽然都是图形化的语言，但是 ICON 重在展示功能，它是功能识别图标，而 LOGO 主要传达的是身份信息属于身份识别图标。应用场景在日常生活中 ICON 的应用应该是非常广泛的，我们随时可以在各个地方看到 ICON 的存在，例如我们熟知的界面设计中，还有日常生活的指示牌上等等，我们可以把这些场景归为三类，图形界面，产品表面和日常交通指示。图形界面，就是我们最熟悉的桌面图标、手机应用图标、APP界面图标等等...产品表面，常见的电器开关按钮、易碎品标识、USB接口图标等。日常交通指示图标包括：地铁交通指示标、卫生间图标、安全出口…想必这些大家应该都很熟悉，在日常生活中我们接触到的 ICON 比比皆是。界面图标界面图标的发展风格可以归纳为从拟物图标过渡到2.5D图标再到扁平图标，到现在的微扁平，微拟物的发展过程。拟物图标由于人们都是通过以往的认知来理解新事物，所以基于这一点，当时应用界面必然要采用拟物风格，以便于人们的理解和操作。但是随着 ICON 的发展，拟物图标也带来了一些问题，因为用户关注的核心永远都是信息本身，华丽的视觉元素或许在用户使用的初期，起到赏心悦目的装饰，但久而久之，这都将成为对用户获取信息的一种干扰。再者，大家都熟悉的事物其实非常有限，而 APP 的创新却在不断进行，很多创新的产品本身在现实世界就没有参照物，所以也决定了拟物图标必然会被取代，2.5D 图标就是在拟物图标和扁平图标中的一个过渡风格。扁平图标2013年，苹果推出了iOS7 开启了拟物向扁平转变的风潮。扁平化的概念最核心的地方就是：去掉冗余的装饰效果，意思是去掉多余的透视，纹理，渐变等等能做出3D效果的元素让“信息”本身重新作为核心被凸显出来。并且在设计元素上强调抽象、极简、符号化的概念。扁平图标风格发展到后期也随之带来了一些问题，由于它们表现形式太过于抽象、缺乏情感的传递，也没有获得大众的青睐，这也表明 UI 新的趋势再一部向“突出内容”的本质靠拢，即“认知简约”。微扁平、轻拟物从扁平风格发展至现在，图标慢慢开始发展到微扁平轻拟物的方向，相较于拟物风格不会有太多复杂的视觉元素，与扁平风格又有了更丰富的情感内容，所以现在界面中，在面积比较小的区域我们使用扁平图标或线形图标；在面积比较大的区域我们会使用加入渐变甚至轻质感的图标。界面中的图标分类界面中的图标可以分为功能性图标和产品图标两类。产品图标可以体现整个产品的特性和风格，有时通过产品图标我们可以直观的感受到这个产品的主要功能。功能性图标则向我们传达了一定的含义，它代替文字可以让我们看到图标快速反应图标所对应的功能。这次我们主要来分析一下功能性图标。功能图标风格在界面中最常见的功能图标按样式一般分为线性图标和面性图标两大类，在线性和面性图标两类的基础上根据不同设计技法又区分出了更多的分类。线性图标面性图标线性图标线性图标通过线来塑造轮廓。在界面中App的图标尺寸并不大，所以如果线过于复杂，在小面积中过多的线会对识别性产生较大的困扰。另外苹果iOS11系统倾向于使用剪影图标，所以线性图标风格使用会相对减少。在图标设计中使用的线有粗细之分，常用的App图标设计线的粗细一般有2PX或者3PX，不同的线条粗细 ICON 所带来的视觉感受也不同，细线显得精致，粗线视觉面积大，显得厚重。圆角粗线条的 ICON 显得饱满而可爱，个别 App 的底部标签栏图标采用粗线条设计，但粗线条的 ICON 图形较为极简才适用。线性图标根据样式还可以分为：双色线性图标、线性填充图标、线性渐变图标。面性图标面性图标是通过面来塑造形体的图标，采用了剪影的设计形式，通过线或者面去切割基础轮廓面，通过分型来塑造图标的体积感。不同的切割手法造成了面性图标设计感的差别。面性图标根据不同的配色样式可以分为：单色饱和度填充图标，纯色渐变图标和多色渐变图标。功能性图标位置功能性图标一般在界面中应用于标签栏，导航栏以及金刚区。1. 标签栏标签栏是移动应用中最普遍、最常用的导航模式，也被我们称为 Tab 栏，一般图标有3-5个，应用于信息之间的跳转，提供页面的切换、功能入口以及界面导航的功能。其目的意义在于指示当前页面所处的位置。2. 导航栏导航栏我们称它为 Navigation Bar ，和标签栏本质上其实相似，但是展现形式有很大区别。导航栏一般处于页面的顶部，在使用数量和形式上更加灵活。3. 金刚区金刚区一般位于首图 Banner 之下的，属于页面的核心功能区域，多以宫格的形式排列展现的图标，一般情况一屏5-10个，主要负责着业务导流和功能选择的作用。ICON 中的品牌感传递当我们掌握了图标的基本知识，那么如何设计非常有特色的图标，设计符合产品定位的图标呢，这时候我们需要引入品牌设计的理念。通常意义的品牌包括了理念、视觉、行为三个部分，而我们这里提到的品牌只是视觉表现层面的。品牌基因是一个图形符号，在界面设计中，我们需要将这些基因、灵感可视化，提取出一个或者多个视觉符号传达给用户。怎样在图标中加入品牌感，可以归纳为四个方法：吸取品牌色、提取品牌元素、吉祥物和应用品牌图形。1. 吸取品牌色每个应用都应该有自己独特的品牌色，我们可以直接提取品牌色作为图标设计视觉元素，使用户加深对品牌色的感知，像“闲鱼”Tab 图标使用了品牌色——黄色和黑色。Keep 应用的图标也提取了品牌色——蓝紫色来作为图标的颜色，和品牌传达的感受是一致的。2. 提取品牌元素除了颜色之外，我们还可以抓取品牌元素特征来运用在图标中，例如优酷的图标，除了采用了颜色基因之外，还在 logo 上提取了一个叠层的效果，这样使得整套图标风格十分统一，传达的品牌基调也是十分一致的。Google的图标也是提取了 logo 上的颜色，并且把 Google 的特色融入了其他图标中，一次次加深用户对品牌的认知度。3. 运用吉祥物现在很多品牌都有人们熟知的吉祥物形象，那么在“我”中，美团外卖和站酷都打破了用人物缩影图标的形象来作为 tab 栏图标，而是运用自己的吉祥物的形象，做出了自己产品的独有特色。4. 品牌图形品牌图形的运用，通过对logo或品牌元素提取特定形状的提取来运用在图标上，例如网易云音乐和花瓣的图标就是将 logo 图形直接作为图标运用，网易云的图标不仅提取了品牌图形，而且其余图标也将品牌图形的圆润感运用其中。ICON 的评判标准我们了解了 icon 的基本知识，那么如何设计一个好的 icon 呢？怎样评判我们的 icon 是否合适，是否贴合整个产品呢？我们需要了解什么才是一个好的 icon 。我们可以从四个方面来检验，分别是：识别性，规范性、整体风格与品牌感。1. 识别性图标就是帮助用户理解信息，所以识别性是一个图标最重要的一项，尤其在没有文字说明的情况下，一定不能让用户产生疑惑，识别性可以分为两类，分别是含义识别和视觉识别。含义识别：是视觉语言是否替换文字语言，简言之就是让你的图标可以被用户理解，不会让用户产生歧义。视觉识别：是图标的大小，颜色，线条的粗细，这些影响影响视觉识别的因素，在具体样式中提高视觉识别性。2. 规范性规范性也是做好一个图标的基础，我们要保证图标在视觉大小的一致性，图标饱满度、遵循同一种规律，细节统一性。a. 视觉大小的一致性：我们在同等尺寸的基础上分析形状间的视觉差异，来审视视觉上是否统一，如同等大小圆和方形的视觉大小就不一致，那么我们可以规定它的最大尺寸，进而在尺寸规范中调整适当的距离，使得视觉大小达到统一。b. 饱满度：如何判断图标是否饱满呢？常用的衡量方法就是正负形衡量法，在图标所占区域的矩形框中，看图标的正形的面积是否还可以增加。c. 同种规律：同一套图标必定是以同种风格呈现的，那么我们检验时可以看下自己的图标是否是遵循了同一种规律，如：是否全部使用了圆角或直角的风格，绘制风格是否一致。d. 细节统一：细节问题包括像素是否对齐、圆角、描边粗细是否统一的细节都需要我们在绘制时注意。3. 整体风格整体风格是要注意图标传达的性格与 app 的基调是否一致，每个产品因为定位，针对人群不同，整个 app 的基调也不一样，例如一个针对儿童教学类的应用，它的性格就是偏卡通可爱的类型，那么我们的图标设计上也要体现这个性格特点，尽量使用卡通圆润的方法去设计。4. 品牌感品牌感就是我们上面谈到的要与品牌理念相符，传达给用户的感受一致，通过吸取品牌色，提取品牌元素，采用品牌吉祥物和品牌图形的方法来提取品牌基因。我们要试着从品牌设计的角度去理解，寻找自己产品独特的品牌气质，挑选合适的技法。然后把这些元素具象化，融入在界面设计中。总结在尺寸有限的界面上，小小的 icon 可以更加简单高效的表达含义，传递给用户情绪和设计感，并且给用户正确和友好的指引，怎样把图标设计做到更好，这就需要我们在平时设计的基础上进行深度的思考，希望我的这篇梳理可以给大家带来帮助。如有遗漏，欢迎大家补充。作者：许了了原文地址：https://www.zcool.com.cn/article/ZODMxNTM2.html编辑于 2019-02-12 15:11设计​赞同 43​​添加评论​分享​喜欢​收藏​申请转载​文章被以下专栏收

在网页中使用 icon 字体图标 | 前端开发 - 知乎

在网页中使用 icon 字体图标 | 前端开发 - 知乎首发于效率工具指南切换模式写文章登录/注册在网页中使用 icon 字体图标 | 前端开发彭宏豪本文首发于我的个人号「效率工具指南」最近在 B 站上看 Pink 老师的前端视频，简单总结一下在网页中使用 icon 图标的两种方法。 直接插入字体图标这里说的字体图标，是指既有普通 icon 图标的外观，又带有字体特征的图标，可以像调整字体那样、调整图标的大小和颜色，且图标放大之后不会失真变模糊。 我们一般是从网上下载字体图标的，譬如国内的阿里巴巴旗下的矢量素材网站 iconfont、国外的 IcoMoon 等。去年写过一篇文章《微信小程序开发 | 如何在小程序中使用自定义 icon 图标》，其中介绍了 iconfont 图标的使用，这回介绍一下使用来自 IcoMoon 的图标的方法。 打开 IcoMoon 图标官网，从中挑选你想使用的 icon 图标，底部的 Selection 会统计你选中的图标数量，选好图标之后，点击右下角的 Generate Font，生成字体图标。在打开的页面，会显示我们刚才挑选的所有 icon 图标，并且提供图标的 unicode 编码，这些编码等下要用到，但现在先不管。点击右下角的 Download，下载生成的字体图标文件。 IcoMoon 图标下载：https://icomoon.io/app/#/select 解压下载的压缩文件，其中包含下面这些文件，我们需要用到其中的 fonts 文件夹。fonts 文件中包含了 4 个字体文件，这是因为不同浏览器所支持的字体格式是不一样的，考虑到兼容性，fonts 文件夹就包含了主流浏览器支持的字体文件： TrueType 字体(.ttf)：是 Windows 和 Mac 最常见的字体Web Open Font Format 字体(.woff)：支持的浏览器有 IE 9+、Firefox 3.5+、Chrome 6+、Safari 3.6+、Opera 11.1+Embedded Open Type 字体(.eot)：是 IE 专用的字体，支持的浏览器有 IE 4+ SVG 字体(.svg)：是基于 SVG 字体渲染的一种格式，支持的浏览器有 Chrome 4+、Safari 3.1+、Opera 10.0+、iOS Mobile Safari 3.2+将 fonts 文件夹复制到网页的项目文件夹 中，譬如放在与 index.html 文件同级的路径下。打开 HTML 文件，在 style 标签中粘贴下方的代码，定义我们等下需要用到的字体 icomoon。需要注意的是，如果 fonts 文件与 html 文件在同个路径下，就不需要修改下方代码中的 url 地址。粘贴代码之后，先来看一下我们最终想要实现的效果，如下图，下方的红色爱心❤️图标，就是前面说到的字体图标。根据最终想要实现的效果，我们要去到 html 文件中书写相应的代码。在 html 文件的 body 标签中输入下方的一行代码，中间的 span 标签包含的方块，其实就是爱心图标，只不过它无法在 html 文件中正常显示。

我  你

我你

font-family: 'icomoon';

}此时在浏览器中重新打开 html 文件，我们所使用的字体图标就会正常显示了。如果你还想调整字体图标的大小和颜色，可以在 CSS 中增加另外两个属性：font-size 和 color。css：p span {

font-family: 'icomoon';

font-size: 50px;

color: red;

}一番设置之后，重新在浏览器中刷新页面，就可以看到最终的效果啦。通过伪类选择器使用字体图标前面介绍的第一种方法，需要同时在 body 标签(html) 和 style 标签(css) 中同时书写相关的代码，如果我们想让 html 文件的结构更加简单，我们可以通过第二种方法——在 style 标签(css) 中通过伪类选择器使用字体图标，这样就只需要在 style 标签或 css 文件中书写相关的代码。 先来看一下我们最终想要实现的效果，如下图所示，给输入框的右侧添加一个向下的小三角 图标。想制作这个效果，同样是先从前面介绍的 IcoMoon 网站下载字体图标，将解压后的文件中的 fonts 文件夹放到与 index.html 同级的路径下，接着在 html 的 style 标签中粘贴下方的代码：在 html 的 body 标签中插入一个空白的盒子 div 标签：

接着在 style 标签中，给 div 盒子设置宽度、高度，并给它设置一个粗细为 1 px 的灰色边框：

此时在浏览器中打开 html 文件，就可以看到下图所示的孤零零的输入框。接着继续给这个输入框「添砖加瓦」——添加一个向下的小三角 ，继续在 style 标签中书写代码：div::after {

content: '';

font-family: 'icomoon';

}稍微解释一下这个代码，在 div 后面加上两个英文中的冒号，并且跟上单词 after 或者 before，就是所谓的伪类选择器，在我目前的认知范围内，伪类选择器就是用 css 代码来给 html 页面添加额外的元素，我们也确实可以在网页中看到添加的小三角，如下图。但这段代码是写在 css 而非 html 文件中，一定程度上可以简化 html 文件的代码。到这里，我们就顺利地在 html 页面中添加了字体图标，值得一提的是，伪类选择器中 content 属性的值，除了可以是字体图标对应的方块字符，还可以是字体图标下方的编号。以下图为例，爱心图标的编号是 e9da，因此 content 属性的值也可以是 \e9da ，通过编号来调用字体图标的时候，需要在编号的最前面加多一个反斜杆 \ 。div::after {

content: '\e9da';

font-family: 'icomoon';

}引入字体图标之后，字体图标默认位于输入框的左上角，为了将字体图标移动到右侧居中的位置，这里还需要用到另外的知识——定位，包含相对定位和绝对定位。关于定位的知识，这里暂时就不过多展开了，可以记住一个口诀「子绝父相」，即子元素设置绝对定位，父元素设置相对定位，就可以达到自由移动下拉小三角位置的目的。分别给 div 和伪元素选择器 div::after 添加另外的样式：div {

position: relative;

}

div::after {

position: absolute;

top: 12px;

right: 10px;

}这里的 top 和 right 属性的值，并不是唯一的，需要根据实际情况，配合浏览器的开发者工具进行调整，最终得到看起来比较舒适的值（主要就是调整到小三角可以位于输入框水平居中的位置），最终效果如下。以上，就是本次想和你分享的内容。希望对有需要的朋友有帮助。发布于 2021-09-19 08:13字体前端开发网页设计​赞同 5​​5 条评论​分享​喜欢​收藏​申请转载​文章被以下专栏收录效率工具指南公主号同专栏名，欢

Icons 字体图标教程

Icons 字体图标教程

w3schools 教程

HTML

CSS

JAVASCRIPT

BOOTSTRAP

JQUERY

PHP

SQL

PYTHON

PYTHON2

JAVA

C

C++

C#

Linux

AI



教程库

参考手册

测验

练习

HOWTO

FAQ

Icons 字体图标教程

Icons 字体图标简介

Icons 字体图标大全

Font Awesome 5

Font Awesome 5 图标简介

Icons 辅助

Icons 警报

Icons 动物

Icons 箭头

Icons 音频和视频

Icons 汽车

Icons 秋季

Icons 饮料

Icons 品牌

Icons 建筑

Icons 商业

Icons 野营

Icons 慈善

Icons 聊天

Icons 国际象棋

Icons 儿童

Icons 服装

Icons 代码

Icons 通讯

Icons 电脑

Icons 建造工具

Icons 货币

Icons 日期和时间

Icons 设计

Icons 编辑器

Icons 教育

Icons 表情

Icons 能源

Icons 文件

Icons 金融

Icons 健身

Icons 食物

Icons 水果和蔬菜

Icons 游戏

Icons 性别

Icons 万圣节

Icons 手势

Icons 健康

Icons 节日

Icons 酒店

Icons 家居

Icons 图像

Icons 界面

Icons 物流

Icons 地图

Icons 航海

Icons 营销

Icons 数学

Icons 医学

Icons 视频

Icons 音乐

Icons 对象

Icons 支付和购物

Icons 药房

Icons 政治

Icons 宗教

Icons 科学

Icons 科幻

Icons 安全

Icons 形状

Icons 购物

Icons 社交

Icons 旋转

Icons 体育

Icons 春季

Icons 状态

Icons 夏季

Icons 桌面游戏

Icons 切换

Icons 旅行

Icons 用户和人物

Icons 车辆

Icons 天气

Icons 冬季

Icons 书写

Font Awesome 4

Font Awesome 图标简介

Icons 品牌

Icons 图表

Icons 货币

Icons 方向

Icons 文件类型

Icons 表单

Icons 性别

Icons 手势

Icons 医疗

Icons 支付

Icons 加载中

Icons 文本

Icons 交通工具

Icons 视频播放

Icons Web 程序

Bootstrap 图标

Icons BS 字体图标

Google 图标

Google 字体图标简介

Icons 动作

Icons 警报

Icons AV

Icons 通讯

Icons 内容

Icons 设备

Icons 编辑器

Icons 文件

Icons 硬件

Icons 图像

Icons 地图

Icons 导航

Icons 通知

Icons 放置

Icons 社交

Icons 切换

字体图标简介

❮ 首页

下一节 ❯

如何添加字体图标

要插入图标，请将图标类的名称添加到任何内联 HTML 元素中。

使用 和 元素被广泛用于添加图标。

下面图标库中的所有图标都是可缩放的矢量图标，可以使用CSS（大小、颜色、阴影等）进行自定义。

Font Awesome 5 图标

要使用免费 Font Awesome 5 图标，请访问 fontawesome.com 并注册登录以获取在网页中使用的代码。

关于如何开始使用Font Awesome 5 图标，请访问 Font Awesome 5 一章。

注释: Font Awesome 5 图标无需下载或安装！

实例

class="fas fa-cat">

亲自试一试 »

Font Awesome 4 图标

要使用 Font Awesome 4 图标，请在 HTML 页面的 部分添加以下行:

注释: Font Awesome 4 图标无需下载或安装！

实例

亲自试一试 »

Bootstrap 3 图标

要使用 Bootstrap 3 图标，请在 HTML 页面的 部分添加以下行:

注释: Bootstrap 3 图标无需下载或安装！

实例

亲自试一试 »

注释: Bootstrap 4 中不支持 Glyphicons。

有关 Bootstrap 3 和 Glyphicons 的更多信息，请访问我们的 Bootstrap 3 教程。

Google 图标

要使用 Google 谷歌图标，请在 HTML 页面的 部分添加以下行:

注释: Google 谷歌图标无需下载或安装！

实例

cloudfavoriteattachmentcomputertraffic

亲自试一试 »

有关所有图标的完整列表 (font awesome, bootstrap 和 google)，请访问 图标参考手册。

❮ 上一节

下一节 ❯

颜色选择器

读后有收获微信请站长喝咖啡

报告错误

打印

关于

学习路线

×

错误报告

如果您发现内容有误或提出修改建议，请随时向我们发送 E-mail 邮件:

421660149@qq.com

您的建议:

您的 E-mail:

页面地址:

内容描述:

提交

×

感谢您的帮助！

您的建议已发送到 W3schools。

W3Schools 在线教程提供的内容仅用于学习和测试，不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。

Copyright 2020-2024 关于我们 | 隐私条款 | 学习路线 | 京ICP备14045893号-9

Icon和文本对齐方式的探索_CSS, icon, vertical-align, 会员专栏 教程_W3cplus

Icon和文本对齐方式的探索_CSS, icon, vertical-align, 会员专栏 教程_W3cplus

跳转到主要内容

w3cplus

Menu

会员专栏

CSS

JavaScript

小册

Mobile

SVG

标签云

文章列表

你在这里首页

Icon和文本对齐方式的探索

作者：大漠 日期：2018-08-03 点击：7314

CSSiconvertical-align会员专栏

特别声明：如果您喜欢小站的内容，可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!或添加QQ：874472854(^_^)

在Web中很多场景中都会使用到Icon，那么就会面临Icon和文本对齐的处理。而这个对齐效果的处理又不是一件轻易的事情，特别是面又众多不同移动终端的情形之下。那么今天这篇文章就来和大家一起探讨一下这方面的话题。

Web中的图标

这里所说的Web中的图标是指Web中的Icon图标。从《Web中的图标》一文中，我们可以得知，到目前为止，在Web中使用图标的方式主要有：

通过img标签加载Icon图标

使用svg内联标签，加载矢量Icon图标

通过Icon Fonts来加载Icon图标

不管是哪一种方式，都有各自的利弊，至于怎么选择，可以阅读《Web中的图标》一文。在这里，我们主要来探讨的是图标和文本的对齐姿势。

Web中引用图标的姿势

在Web应用程序或者Web页面中，引用Icon图标，常见的方式主要有：

文本

文本

文本

文本

文本

文本

但在很多情况之下，为了更好的让Icon图标和文本能对齐（垂直对齐），大部分同学喜欢用一个行内元素，比如把文本包裹起来，就像下面这样：

文本

而实际中，有些场景是无法让我们人肉的给文本内容添加类似这样的标签，特别是在CMS系统中的操作，或者说通过JavaScript动态插入内容。

对于如何使用CSS让Icon图标和文本能够垂直对齐，我想大家脑海中第一浮现的属性是 vertical-align 。那么，是否使用该属性就真的能让Icon图标和文本能完美的实现垂直居中呢？希望大家带着这样的一个问题继续往下阅读。

浏览器的默认行为

首先来看看浏览器的默认行为。先来看两种情形：

case

case

为了让样子好看一点，添加一点基本样式：

body {

padding: 2vw;

font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",

"PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC",

"WenQuanYi Micro Hei", sans-serif;

font-size: 14px;

line-height: 1.7;

-webkit-font-smoothing: antialiased;

}

svg,img {

width: .85em;

}

.fas {

font-size: 170px;

}

在你的浏览器下看到的效果如下：

接下来稍稍改变一下，让浏览器自行让Icon和文本垂直对齐。到目前为止，主流的有两种方式：

inline-flex 和 align-items

inline-block 和 vertical-align

前者采用的是CSS Flexbox的模式，后者是较为传统的垂直对齐模式。一般情况之下，inline-flex和align-items运用于：

case

即： 文本没有额外的HTML标签包裹 !而inline-block和vertical-align一般用于：

case

事实上，inline-flex也可以运用于后者的结构中。

特别声明，示例代码中的标签可以是标签也可以是其他任何你希望的HTML标签或者HTML自定义标签。

为了能更为形象的看出它们之间的差异性。来做几个测试用例，看看浏览器对其渲染效果的差异性。

先看inline-flex（不管带不管span标签）：

.demo {

display: inline-flex;

align-items: center;

}

看上去似乎对齐：

如果按照inline-flex和align-items的属性特性描述来判定，Icon和文本是应该对齐（注意是应该对齐）。那么我们把页面的截图放到设计软件中来描绘制一下：

为了能更好的展示测试效果，我把文本换成了三种情形。仅从页面上的显示效果（肉眼看上去），似乎对齐，但事实并非如此。

接着再来看第二种对齐方式：

.demo img,

.demo svg,

.demo .fas,

.demo span{

display: inline-block;

vertical-align: middle;

}

浏览器渲染出来的效果如下：

左侧和右侧的效果有明显的差异性。主要是左侧的文本内容没有使用额外的HTML标签包裹。如果你观察足够仔细的话，使用inline-block和vertical-align:middle会造成文本离开baseline的基线，这种现象会直接影响上下间距和相邻元素的对齐。

特别声明：上面测试效果截图来源于 Chrome v67.0.3396.99。MacOS v10.12.6。其他平台，特别是Android系统下测试结果略有偏差！

简单分析

前面我们看到了浏览器对于Icon和文本垂直对齐的渲染效果。不管使用的是哪一种方式（浏览器对齐方式），最终看到的效果都只是近似对齐。为什么会这样呢？这里简单的来分析一下。

IFC概念

IFC是“Inline Formatting Context”的缩写，类似于BFC的一个概念，其主要用来定义行内盒子（Inline Box）组成上下文中的表现特性。有关于IFC的详细描述，可以查阅W3C规范中的相关说明。

根据W3C规范的描述我们可以得知：

由IFC描述可以了解到，行内盒子（Inline Box）是由行内级元素（Inline Level Elements）和文本（Contents）所组成，而行内盒子水平排列所构成的一行矩形区域，被称作行盒子（Line Box）。

从IFC的场景中再回到我们的实际场景中，Icon图标是一个行内级元素，而文本是另外一个行内级元素，把这两个元素形成的两个行内盒子放在一起，构成了一个行盒子。除了inline-block或inline-flex元素和文本是行内级元素外，display属性为inline、inline-table的元素以及像img、input、video等替换元素（Replaced Elements）都是行内级元素，但它们在行盒子中的设计计算方式不太相同。

替换元素的高度等于它们本身的高度（包含margin），而非替换元素的高度，其计算非常复杂，其中字体度量（Font Metrics）对其影响就较大。

Font Metrics

Font Metrics常常被称之为字体度量，指的就是字体中的一系列参数，这些参数对于CSS而言是不可见的，但我们可以借助类似FontForge和Opentype.js等工具来获取。

如果你对字体度量较为感兴趣，强烈建议你花一些时间这篇文章进行了解。这里用一张经典的图来展示我们更为关注的一些信息：

而我们关注的是，怎么得到元素的实际高度。假设我们的示例中，设置了font-size为100px，它的高度并不一定等于100px，比如这里，其实际高度就是100 / 2048 * (2167 + 536) ≈ 132px：

其他概念

这里所说的其他概念，指的就是CSS中有关于字体相关的一些属性：

vertical-align

baseline

line-height

font-size

那么在这里我并不想花太多时间来解释这些概念或者说这些属性的具体使用。但对于Icon和文本的对齐方式的的确确会受到这些属性的值的影响。或者简单的说，将会受到字体度量相关的参数影响，而这几个又是其重要的一些参数。

假设你对这些属性和相应的概念有了深入的了解。如果你对它们还不够了解，建议你花时间先阅读下面这些文章，因为这些文章可以更好的帮助你理解后面的内容，和找到解决方案的依据：

深入了解CSS字体度量，行高和vertical-align

vertical-align，你应该知道的一切

CSS Baseline: The Good, The Bad And The Ugly

CSS深入理解vertical-align和line-height的基友关系

CSS Inline Layout Module Level 3

解决方案

特别声明，整个方案的解决思路来源于@长天之云的《图标如何对齐文本》一文。

虽然使用inline-flex和align-items或inline-block和vertical-align可以达到对齐效果，但这些效果都是近似对齐。因此很多同学会质疑，为什么没有真正对齐，特别是在Android系统上的一些APP中。造成这种现象主要是我们没有搞清楚浏览器是如何决定图标放置，它们对齐又是参照什么方式。

如果要彻底解决，那就需要搞清楚它们之间的关系。

假设你对字体的特征和CSS的vertical-align有了一定的了解。因此我们直接进入主题。先来看一张图：

从这张图中，可以获取很多有价值的信息：

最左侧是一个已对齐的Icon图标，它的尺寸是1.2 x 1.2 em

最右侧是文字特征的一些横向参考线，除了cap-line之外都是vertical-align的可选值，每种值得到的不同效果，可以阅读vertical-align，你应该知道的一切一文

vertical-align作用于文本和非文本（比如示例中的img、svg等元素）效果将不同，比如vertical-align取值为baseline时：“同一行内不同字体类型、字体大小或不同行高的文本对齐在相同的baseline上；同一行内不同尺寸的图片底边对齐在baseline上”

xHeight为小写字母x的height，可以用ex单位来表示（1ex大约等于0.5em），如果vertical-align取值为middle，那么middle的值就是xHeight的一半（xHeight / 2），因此，如果仅对图片应用于vertical-align: middle时，图片看上去会偏下

capHeight为大写字母高度（CSS和JavaScript都无法获取），大多数字体约为0.7em

了解这些信息之后，我们可以考虑Icon图标和大定字母中间对齐，即：baseline往上先移动capHeight / 2 。 这样一来可以考虑：

从baseline基线开始偏移

默认情况之下，Icon图标底边贴在baseline上，可以先移动Icon图标自身50%（向下移动，比如translateY(50%)），使其中间对齐baseline，然后再上移capHeight / 2。

.demo img {

vertical-align: baseline;

transform: translateY(calc(50% - 0.35em))

}

从middle基线开始偏移

Icon图标正中间正好在middle基线上，所以可以先将图片下移xHeight / 2，然后再上移capHeight / 2：

.demo img {

vertical-align: middle;

position: relative;

top: -.1em; // xHeight / 2 - cpaHeight / 2 = (.5 - .7) / 2 = -.1em

}

也可以使用ex

.demo img {

vertical-align: middle;

position: relative;

top: calc(.5ex - .35em);

}

其实这种方式也是我们常用的一种方式，但最终的效果也只能得到近似对齐的效果，因为示例中的偏移值会根据当前字体不同而有细微差异。比如下图所展示的数据，就是根据Font Metrics的参数，针对不同字体计算出来的值：

感觉花这么多时间，并不解决我们想要解决的问题。那么有没有办法实现精确的对齐呢？先来看内容，再来找答案吧。同样先上一张图：

内联元素在不同条件下产生了不同的边界（颜色填充区域），先来解释一下这张图展示的相关信息：

j表示基础的line-height，也就是1em高，等同于当前的font-size:100px。当inline-block或inline-flex元素设置为line-height: 1时，就可以得到它，图中橙色区域。值得注意的是，j的边界不在任何参考线上（vertical-align的值对应的参考线）。也就是说，使用这个值的时候要特别小心，特别是设置了overflow: hidden时，有可能会造成内容被截断。这也就是为什么很多同学在一些运用中会发现，文本之类的显示不全。

x表示安全的line-height，是inline元素默认的高度（也是text-top到text-bottom的距离）。也对应(ascender + descender) / unitsPerEm计算得到的值（Font Metrics的一些参数），在我们的示例中，采用的字体对应的值是1.17777。

S表示实际的line-height，是inline-block或inline-flex元素默认的高度（也是top到bottom的距离）。当父容器设置line-height: 1.7时，元素对应的实际line-height是100px * 1.7 = 170px。

有了这些信息只是我们实现精确对齐的基础，关键点我们还需要借助一个参考特。这里可以借鉴CSS规范中的Strut概念：

On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties. We call that imaginary box a "strut." (The name is inspired by TeX.).

也就是说，创建一个局部的容器，生成不可见文本（零空格，模拟Strut），让不可见文本对齐Line Box中其他文本，让图标对齐这个不可见文本。

局部容器的高度可以是上图中S的高度（inline-flex居中），也可以跟随图标的高度（图标绝对定位，保持与容器位置相同），也可以固定（图标绝对定位居中，但缺陷是不能超过行高太多）。

这样一来，我们的结构可以修改为：

​文本

同样可以使用inline-block和inline-flex来完成。先来看inline-block的CSS代码：

span {

position: relative;

display: inline-block;

line-height: 1; // 使文本高度为图标高度

width: 1em; //图标大小，用来占位

}

span img {

position: absolute;

top: 0;

left: 0;

width: 1em;

height: 1em;

}

对于inline-flex要比inline-block简单的多：

span {

display: inline-flex;

align-items: center;

}

原来方案就是这么的简单。

特别声明，整个方案的解决思路来源于@长天之云的《图标如何对齐文本》一文。

除了手动在HTML结构中添加​来模拟Strut之外，还可以借助CSS的伪元素::before来处理：

文本

在上面的代码中添加：

span::before {

content: '\00a0'

}

为了一劳永逸，也可以考虑将其封装成一个组件，比如@长天之云将其封装成了一个React组件。如果你感兴趣的话，也可以将其封装成Vue组件等。

小技巧：如果你项目中使用的是svg标签制作Icon图标。为了能让图标像Icon Font那样缩放，建议你在svg中设置width和height的时候采用em单位，比如width: 1em;height:1em，就相当于SVG图标会根据font-size进行缩放。有关于这方面更详细的介绍可以阅读《Align SVG Icons to Text and Say Goodbye to Font Icons》一文。译文可以点击这里阅读。

总结

Icon图标和文本对齐是日常开发中常碰到的细节问题，在不同的环境和场景中都会花费一定的时间来处理这样的细节。这篇文章主要深纠了一下Icon图标和文本对齐的一些原理，通过这些原理找出相应的解决方案。文章提供了两种解决思路，一种是大家时常用的近似对齐方式，另一种是精确的对齐方式解决方案。

如果您有更好的解决方案，欢迎在下面的评论中一起交流和探讨！

扩展阅读

图标如何对齐文本

Icons and Type

把 SVG 图标对齐到文本，以告别字体图标（Font Icons）的时代

Web中的图标

深入了解CSS字体度量，行高和vertical-alignNike Fingertrap Air Max

上一篇: 五个最新的CSS特性以及如何使用它们 | 下一篇: CSS 字体新玩法之彩色字体

Search this site

直达目的地(^_^)

关于我们

W3cplus

W3cplus是一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文；其文章范围广泛，主要以CSS、HTML、JavaScript、A11Y、动画等教程为主。

关于站长

大漠

常用昵称“大漠”，W3CPlus创始人，曾就职于淘宝。对HTML、CSS和A11Y等领域有一定的认识和丰富的实践经验。现在主要从事智能UI领域的探讨和学习！。CSS和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。

github twitter

我的作品

图解CSS3

本书是历时2载的心血之作，根据最新的CSS撰写，融入了作者在CSS领域多年的使用经验，旨在将本书打造成为CSS领域最权威和实用的专业著作，供没有经验的读者系统学习，供有经验的读者参考备查。新版在《图解SS》中持续更新！

湘B2-20110104-7，衡阳市雅米信息技术有限公司 © 2011-2022 W3CPLUS，感谢Drupal开源技术。感谢七牛云存储提供静态资源空间。

返回顶部

iconfont-阿里巴巴矢量图标库

iconfont-阿里巴巴矢量图标库