HTML中用i作小图标

最新推荐文章于 2024-03-04 14:58:28 发布
最新推荐文章于 2024-03-04 14:58:28 发布
阅读量1.2w 收藏 15
点赞数 2
分类专栏： HTML 文章标签： HTML i 小图标 icon 标签
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangjikuan/article/details/51107178
版权

看很多网站的源代码时候发现很多人用i作为小图标icon，如下代码。菜鸟，很是纳闷，i明明是倾斜的意思的呀

<i class="fa fa-times"></i>

原来这条语句是一个空的i标签，因为没有写任何东西，只不过属性设置成了fa-times小图标的名字这是

正规写法应该是 这样子的

<span class="fa fa-times</span>

其实使用i作为icon是不规范的，虽然长得很像icon

大家之所以习惯这样用可能是因为bootstrap在2.X的版本里面的图表组件是i

在3.X的版本里面的组建改回了span

参考：https://www.zhihu.com/question/26880548

zhangjikuan
关注
  • 2
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
php中<i></i>标签,用i标签<i></i>用作小图标的原因
weixin_31068491的博客
03-18 1254
用 元素做图标在语义上是不正确的(虽然看起来像 icon 的缩写)； 比 短，但 gzip 后差异很小，不过打字可以少按三个键；多数图标用的是空 元素，配合 ::before 伪元素实现，因为没有内容，读屏器不会朗读(这样即使有特殊处理也跳过了)，机器理解起来应该也没什么影响。综合来看，从实用性上暂时没看出有什么缺陷，所以目前用不用 取决于你对于遵循规范有多洁癖。基本语法:before 和...
web开发中用到的图标
12-16
<i class="fas fa-shopping-cart"></i> ``` 对于SVG图标，可以将SVG代码内联插入HTML或者创建一个`<svg>`元素引用外部SVG文件。PNG和JPEG则可以通过`<img>`标签引用。 为了优化性能，可以考虑以下几点： 1. 使用...
html5有时使用 i 标签做小图标
weixin_42187676的博客
07-08 1万+
这个不是H5特有的情况，只是设计师习惯性用法，用i表示ico图标，便于他人理解。例子：
HTML引入icon图标
m0_63300737的博客
12-08 2627
html 引入 icon 图标 1.将需要的图标加入购物车，放入一个你的项目中。 2.打开下该项目，生成链接，选中 font class ，将生成的链接(XXXXXXXX)引入html头部， <link rel="stylesheet" href="http:XXXXXXXX" 3.在body中使用i标签引入图标名 图标名在你创建的项目中获取 <i class="iconfont XXX"></i> ...
html i标签css 图标,ICONO – 仅一个标签实现的纯CSS图标
weixin_29543187的博客
06-08 1496
ICONO – 仅一个标签实现的纯CSS图标1月 29, 2015评论Sponsor图标在WEB和APP设备上是很常用的设计元素，有些网站为了兼容高分辨率的显视屏，比如苹果Retina设备，一般使用网页图标字体或是SVG的图标，麻烦一点就是做多套不同大小的图标。除此之外，还有一个方案就是用CSS实现图标了。今天向大家介绍一套使用纯CSS绘制的图标，只需要一个html标签就能实现，图标也是网站常用的...
HTML 网页title的favicon图标
qq_48555504的博客
01-20 3210
制作favicon图标 favicon图标放到网站根目录下 HTML页面引入favicon图标 一.制作favicon图标 1.把设计好的图标切成png图片 2.把png图片转换为ico图标，可借助于第三方转换网站，例如比特虫：http://www.bitbug.net/ 目标尺寸：常用的京东图标是32*32，也可选48*48 二.favicon图标放到网站根目录下 三.HTML页面引入favicon图标 在html页面里面的<head></head&gt...
HTML 引用小图标
x311609001028的博客
01-07 3536
阿里巴巴矢量图标库里有各种类型小图标，引用这些图标代替绘制或PS很方便。 阿里巴巴矢量图标库 将需要的图标加到自己项目里，会生成链接代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content...
HTML 4.01 参考手册(网页版)
01-17
`i` 和 `tiy` 目录可能包含了网页中用到的图片或图标资源，或者是一些辅助性的脚本或样式文件。 综上所述，HTML 4.01 参考手册涵盖了 HTML 4.01 的基本结构、元素、属性，以及如何与 CSS 配合实现网页设计。通过...
完整的_HTML_参考手册
03-20
6. `<applet>`: 不推荐使用，用于在HTML中嵌入Java小应用程序。现代网页开发中通常使用JavaScript或WebGL等技术。 7. `<area>`: 在`<map>`元素内使用，定义图像映射中的区域，允许将图像的不同部分链接到不同的URL...
个人网页htmlcss模板
01-22
在HTML中用`<footer>`表示，CSS可以调整其在页面底部固定的方式。 6. **图标（Icons）**：提高用户体验和视觉吸引力。模板可能包含SVG图标或字体图标，它们可以通过`<i>`或`<span>`元素与CSS的`content`属性结合...
html大全
05-22
5. `<applet>`: 在早期的HTML中，这个标签用于嵌入Java小应用程序，但在HTML5中已被废弃。 6. `<area>`: 用于定义客户端图像映射中的一个可点击区域，通过`shape`、`coords`和`href`属性定义形状和链接。 7. `...
html的fa图标代码,font awesome
weixin_34870207的博客
06-09 7762
如何使用Font Awesome字体图标Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库。这标字体集几乎囊括了网页中可能用到的所有图标，除了包含 Twitter Boostrap 的默认图标外，还有社交收集图标、Web 应用法度图标和编辑器图标等等，可以免费用于贸易项目。怎么调整font awesome图标大小首先在css中复制一个样式文件(如果使用的是l...
<i>元素创建图标的三种方法
Allenyhy的博客
08-08 1万+
1.简单粗暴型 直接设置&lt;i&gt;元素为inline-block，然后为行内级框设置大小，接着直接把图像放在这个框里面，然后调整位置和图片大小即可。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; .icon{ display:inline-block; width:50px; height:50px; ba...
bootstrap-datetimepicker当隐藏时间选择器时触发hide事件
ywb201314的专栏
09-24 815
在开发过程中我们时常用到时间选择器，bootstrap-datetimepicker无疑是当下使用比较多的时间选择插件。 在项目开发中遇到如下需求： 根据给定的起始时间及结束时间自动生成天数或小时数 bootstrap-datetimepicker提供了hide事件! if (!ace.vars['old_ie']) $('#startTime1').datetimepicker({ format: 'YYYY-MM-DD HH:mm',//use this opti.
HTML中引用icon图标
qq_43804601的博客
05-03 1万+
简单介绍在HTML如何中引用icon图标 1.登录iconfont官网 生成连接 ① 搜索想引用的图标，找到后加入购物车 ② 在购物车中将icon图标添加至项目 ③ 点击生成新代码 生成代码（示例）： //引入iconfont的声明 @font-face { font-family: 'iconfont'; /* Project id 3373080 */ src: url('//at.alicdn.com/t/font_3373080_hrq4d4vg3gp.woff2?t=1651
2275个HTMLfont图标，使用class直接引用
最新发布
loveisbunny的博客
03-04 433
自己从网上找图标然后做的图标库，可以使用“i”标签或者“span”标签加 “class”直接引用到html页面中，可以调整图标大小和颜色，效果如下。右下角有搜索按钮，输入后回车自动搜索（英文）点击自动复制class名称。
Web前端笔记-i标签做小图标以及改源码注意事项
IT1995的博客
06-22 1万+
目录 最简单的使用i标签做小图标 修改前端源码注意的问题 最简单的使用i标签做小图标 运行截图如下： 实例结构如下： 此处就是使用i标签制作的小图标 其中html源码如下： <html> <head> <title>Hello World</title> <link href="test.css" r...
HTML标签图文详解（二）
liuzuoping的博客
12-25 759
上篇博文我们对HTML有了大致的认识并且熟悉了一些基本的标签 HTML标签图文详解（一） 接下来我们开始更加深入的学习 <body>标签的属性 其属性有： bgcolor：设置整个网页的背景颜色。 background：设置整个网页的背景图片。 text：设置网页中的文本颜色。 leftmargin：网页的左边距。IE浏览器默认是8个像素。 topmargin：网页的上边距。 rig...
bootStrap ace tree例子 JAVA版本
热门推荐
奋斗天地中
01-22 4万+
bootstrap是Twitter开发的开源前端框架，有着丰富的组件。通过使用这些组件，程序员可以更容易的编写好看的web网站。Ace是一个轻量，功能丰富，HTML5、响应式、支持手机及平板电脑上浏览的管理后台模板。 关于tree的使用,html文件夹下treeview.html给了静态数据的例子，examples下treeview.html给了动态PHP语言的例子。这里给的是java版本的
html中用CSS代码
10-13
可以在HTML文件中使用<style>标签来嵌入CSS代码，也可以将CSS代码写在外部的CSS文件中，然后在HTML文件中使用<link>标签引入。 例如，在HTML文件中嵌入CSS代码： ``` <!DOCTYPE html> <html> <head> <title>My Website</title> <style> body { background-color: #f2f2f2; font-family: Arial, sans-serif; } h1 { color: #333; text-align: center; } p { font-size: 18px; line-height: 1.5; margin-bottom: 20px; } </style> </head> <body> <h1>Welcome to My Website</h1> <p>This is a paragraph of text.</p> <p>This is another paragraph of text.</p> </body> </html> ```
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值