关闭

html中为何经常使用<i>标签来作为小图标呢?

时间: 2017-11-21阅读: 6959标签: 图标

很多网站都是习惯使用<i></i>来代表小图标?而实际上用 <i> 元素做图标在语义上是不正确的(虽然看起来像 icon 的缩写),那么用<i>表示小icon,是出于好记的原因吗,还是看上去有点像icon?这样不是违背了语义化的原则吗?  


在语义上<i> 标签显示斜体文本效果,它告诉浏览器将包含其中的文本以斜体字或者倾斜字体显示。从含义上可以看出<i>并不具有icon的语义。所以如果遵循语义最好还是使用<span>,目前3.X的版本里面显示图片由之前的<i>改为了<span>,例如:

<!--在2.X的版本里面的图表组件是-->
<i class="icon-search"></i>
<!--在3.X的版本里面的组建改回了span-->
<span class="glyphicon glyphicon-search"></span>


在一些字体库中通常也是使用i来代表icon的。例如font-awesome字体库中就是使用<i>来显示图标字体的,它的好处是毋庸置疑的:1.矢量(无限缩放、高清)、2.css样式(通用、灵活)、3.体积更小(快速)。
<i class="fa fa-spinner fa-spin"></i>


网上还流行一种显示方式:通过<i>标题的伪类来显示图标,配合 ::before 或者::after伪元素实现,因为没有内容,读屏器不会朗读(这样即使有特殊处理也跳过了),机器理解起来应该也没什么影响。使用伪类的好处就是:插入的内容在页面的源码里是不可见的,只能在css里可见



总结:
由于html中标签的现状是: “爱怎么用就怎么用,哪个浏览器也不会难为你”  ,内联元素和块级元素都能通过display相互转换,由此可见标签的灵活性,使用不遵循语义这个问题,主要是因为遵循并没有带来什么实质的好处。所以是否使用<i>标签来作为小图标?就看个人喜好吧。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/138

关闭

设置网页浏览器标签小图标

在线生成ICO图标制作一个16*16 的.icon文件,文件名必须要favicon.ico,然后放在服务器根目录下面,一般浏览器会自动默认在跟目录下面查找。

Bootstrap图标

小图标icon是一个优秀Web中不可缺少的一部分,起到画龙点睛的效果。在Bootstrap框架中也为大家提供了250多个不同的icon图片。本文将详细介绍Bootstrap图标,Bootstrap框架中的图标都是字体图标

字体图标的使用步骤

字体图标的优点:体积小,本质是字体,可以改变颜色,大小,背景等。UI人员设置svg格式交给前端人员;前端上传svg格式生成兼容性字体文件包;下载兼容性字体文件包到本地

利用伪元素:before和:after插入图标

如果你想在网页的某些文字前加图标或者想改变li元素默认的图标,你会如何做?本文价绍一种不用再额外添加html标签,存粹利用css就能插入或者自作图标的方式。

reactnative 自定义项目的图标库

github比较火的有如react - native -vector- icons等图标库,为什么提到这些第三方库。首先明确一个点,你是否需要现成的第三方图标库?

HTML中title前面小图标的实现_如何给网页标题添加icon小图标

今天给大家分享的是如何在网页标题中加入小图标,你的图标格式最好是.ico格式的,为了兼容性考虑,使用的颜色不要超过16色,这里这个图标的命名要求必须为favicon.ico

ReactNative中如何使用自定义的Iconfont图标

在App包的构成中图片资源是比较占大小的,所以我们可以利用Iconfont来替代原来的png或者jpg单色图标,iconfont的优点是占Size小、支持任意大小不失真、支持任意颜色设置、平台化管理icon等等。

纯css制作电闪雷鸣的天气图标

使用box-shadow属性写几个圆,将这些圆错落的组合在一起,形成云朵图案;after伪元素写下面的投影样式;before伪元素写黄色闪电的样式;用两个嵌套的div容器就可以了,父容器来控制图标显示的位置

Web 前端矢量小图标的使用方法

在写前端页面时,我们经常会用到一些小图标之类的图片,如果使用图片的话代码写起来比较麻烦,最近发现一个方便实用的方法,直接引用就可以了。

图标使用新姿势- react 按需引用 svg 的实现

图标是前端在业务开发中不得不写的一个东西,以我司的几个部门为例,每个组在写图标上都有不一样的方式:用户平台:单色图标用 iconfont 上提供的字体文件,彩色图标用 img 引入代替或者使用iconfont 上提供的 symbol.js 。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!