精华内容
下载资源
问答
  • i标签
    千次阅读
    2021-07-01 00:58:15

    或者自定义demo.css文件 写入如下内容:@font-face {

    font-family: 'Material Icons';

    font-style: normal;

    font-weight: 400;

    src: url(https://fonts.gstatic.com/s/materialicons/v43/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');

    }

    .material-icons {

    font-family: 'Material Icons';

    font-weight: normal;

    font-style: normal;

    font-size: 24px;

    line-height: 1;

    letter-spacing: normal;

    text-transform: none;

    display: inline-block;

    white-space: nowrap;

    word-wrap: normal;

    direction: ltr;

    -webkit-font-feature-settings: 'liga';

    -webkit-font-smoothing: antialiased;

    }

    引入demo.css文件或者引入 刚刚你下载的文件 或者直接引入

    2. 进入网址选适合你的icon

    3.直接使用i标签 class加入  material-icons属性  assignment_ind 替换你选的icon名称即可

    assignment_ind

    更多相关内容
  • html中为什么用i标签<i></i>作小图标

    千次阅读 2021-07-13 02:32:40
    html中为什么用i标签作小图标发布时间:2021-03-01 10:51:12来源:亿速云阅读:75作者:清风这篇文章主要为大家展示了html中为什么用i标签作小图标,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小...

    html中为什么用i标签作小图标

    发布时间:2021-03-01 10:51:12

    来源:亿速云

    阅读:75

    作者:清风

    这篇文章主要为大家展示了html中为什么用i标签作小图标,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“html中为什么用i标签作小图标”这篇文章吧。

    html是什么

    html的全称为超文本标记语言,它是一种标记语言,包含了一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体,html文本是由html命令组成的描述性文本,html命令可以说明文字,图形、动画、声音、表格、链接等,主要和css+js配合使用并构建优雅的前端网页。用 元素做图标在语义上是不正确的(虽然看起来像 icon 的缩写);

    比 短,但 gzip 后差异很小,不过打字可以少按三个键;

    多数图标用的是空 元素,配合 ::before 伪元素实现,因为没有内容,读屏器不会朗读(这样即使有特殊处理也跳过了),机器理解起来应该也没什么影响。

    综合来看,从实用性上暂时没看出有什么缺陷,所以目前用不用 取决于你对于遵循规范有多洁癖。

    基本语法

    :before 和 :after 伪元素编码非常简单(和大多数的css属性一样不需要一大堆的前缀)。这里是一个简单的例子。#example:before {  content: "#";}#example:after {  content: ".";}

    这个例子中提到了两件事情,第一,我们用#example:before和#example:after来目标锁定相同的元素.严格的说,在代码中他们是伪元素。

    第二,在内容模块中提到,伪元素如果没有设置“content”属性,伪元素是无用的。

    在这个例子中,拥有属性id的元素将有一个"哈希符号"放置内容之前,和一个"句号"在内容之后。

    语法笔记

    你可以设置content属性值为空,并且仅仅把他当做一个内容很少的盒子。像这样:#example:before {  content: "";

    display: block;  width: 100px;  height: 100px;}

    然而,你不可以完全的移除content属性,如果你移除了,伪元素将不会起作用。至少,content属性需要空引用作为它的值(即:content:“”)。

    你也许注意到,你也可以用两个冒号(::before 和 ::after) 写伪元素,这个我以前讨论过的。简短的解释是,对于这两种语法没有什么不同,仅仅一点的不同是,伪元素(双冒号),css3中的伪类是(单冒号)

    最后就语法而言。从技术上讲,你可以普遍的应用伪元素,不是放在特殊的元素上,像这样::before {  content: "#";}

    虽然上面是有效的,但是它十分的没用。代码会在DOM里的每个元素的内容之前插入散列符号。即使你删除了

    标签和它的所有内容,你仍会在页面上看见两个散列符号:一个在里,另一个在标签里,浏览器会自动创建哪一个。

    插入内容的特点

    正如前面提及的,插入的内容在页面的源码里是不可见的,只能在css里可见。

    同时,插入的元素在默认情况下是内联元素(或者,在html5中,在文本语义的类别里)。因此,为了给插入的元素赋予高度,填充,边距等等,你通常必须显式地定义它是一个块级元素。

    这会是对如何设计伪元素的一个简要的说明,看我下面文本编辑器的这幅图

    b2f63643e55782541a3e6422ab18677b.png

    在这个例子中,我高亮的样式将被应用到元素里插入到目标元素内容的前面和后面。

    还要注意的是典型的CSS继承规则适用于插入的元素。例如,你有字体系列黑体,宋体,无衬线字体应用到body元素里,然后伪元素会像其他元素一样继承这些字体系列。

    同样的,伪元素不会继承没有自然继承自父元素(如 padding and margins)的样式。

    之前或之后是什么?

    你的直觉是:before和:after伪元素可能是 插入的内容会被注入到目标元素的前或后注入?但是,正如上面提到的,不是这样的。

    注入的内容将是有关联的目标元素的子元素,content指向的内容会被置于子元素的“前”或“后”。

    为了证明这一点,看看下面的代码。首先,在HTML:

    Other content.

    下面是插入伪元素的css:p.box {

    width: 300px;

    border: solid 1px white;

    padding: 20px;}p.box:before {

    content: "#";

    border: solid 1px white;

    padding: 2px;

    margin: 0 10px 0 0;

    }

    在此html里,你所看的一段文字带有的是一个类的box,还有这样的文字“Other content”在里面(像你所会看到的一样,如果你看见了首页的源代码)。在css中,这段内容被设置了宽度,以及一些padding和可见的边框

    然后我们有了伪元素。在这个例子中,它是一个散列符号插入到该段内容之前。随后css给了它一个边框以及一些padding和margins。

    这里是浏览器中查看的结果:

    f9432fa83681c553034bccace42f15ca.png

    外面的盒子是这个段落。围绕有散列符号的边框表示伪元素的边界。所以,不是插入“before”到段落,而是伪元素被置于到此段落的“Other content”的前面。

    插入非文本内容

    我简要的提醒,你可以把属性的值置为空字符串或是插入文本内容。你基本上有属性的值要包含什么的两个额外的选择

    首先,你可以包含一个指向一个图像的URL,就像在css里包含一个背景图像一样做你能做的p:before {  content: url(image.jpg);}

    注意不能使用引号。如果你将URL用引号括起来,那么它会变成一个字符串和插入文本“url(image.jpg)”作为其内容,插入的而不是图像本身。

    当然,你可以包含一个Data URI代替图像引用,正如你可以用css背景一样。

    你还可以选择attr(X)中的函数的形式。此功能,根据规范 ,“把X属性的值以字符串的形式返回”

    下面是一个例子:a:after {  content: attr(href);}

    attr()函数的功能是什么?它得到特定属性的值并把它作为插入的文本成为一个伪元素。

    上面的代码会导致页面上的每一个元素的href值立即被放置在每个各自的元素的后面。在文档被打印时,它可以用作一个包含所有URl的打印样式表。

    你也可以用这个函数去获取元素的title属性,或者甚至是microdata的值。当然,并不是所有的例子都符合自己的实际,但根据不同的情况,一个特定的属性值作为一个伪元素可以是实际的。

    然而,获取title或者图像的alt的值并作为实际的伪元素显示在页面上是不可能的。记住伪元素必须是被应用元素的子元素。图像,这是void(或者是空元素),没有子元素,所以它在这个列子中不可用,同样也适用于其他空元素,例如:。

    可怕的浏览器兼容性

    任何前端技术的发展势头,第一个问题就是浏览器的支持。在这种情况之下,它不是个很大的问题。

    浏览器支持:before 和 :after 伪元素栈,像这样:Chrome 2+,

    Firefox 3.5+ (3.0 had partial support),

    Safari 1.3+,

    Opera 9.2+,

    IE8+ (with some minor bugs),

    几乎所有的移动浏览器。

    唯一真正的问题是没有获得支持的(不用奇怪)IE6和IE7。所以,如果你的爱好者是在良好合适的web开发(或者其他具有较低IE版本的市场),你可以继续自由地使用伪元素。

    伪元素不是决定性的

    幸运的是,缺少伪元素不会造成大问题。大多数情况下,伪元素一般修饰(或者帮助)内容,不会给不支持的浏览器造成问题。所以,如果你的支持者具有较高的IE版本,你仍然可以在某种程度上使用它们。

    以上就是关于“html中为什么用i标签作小图标”的内容,如果改文章对你有所帮助并觉得写得不错,劳请分享给你的好友一起学习新知识,若想了解更多相关知识内容,请多多关注亿速云行业资讯频道。

    展开全文
  • html的i标签有什么作用

    千次阅读 2021-06-11 17:29:32
    在html中,i标签的作用是给元素文本添加斜体样式;在html里添加i标签后,浏览器会将包含在i标签中的文本以斜体字(italic)或者倾斜(oblique)字体显示。如果这种斜体字对该浏览器不可用的话,可以使用高亮、反白或加...

    在html中,i标签的作用是给元素文本添加斜体样式;在html里添加i标签后,浏览器会将包含在i标签中的文本以斜体字(italic)或者倾斜(oblique)字体显示。如果这种斜体字对该浏览器不可用的话,可以使用高亮、反白或加下划线等样式。

    2021042315253189746.jpg

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    标签显示斜体文本效果。

    标签和基于内容的样式标签 类似。它告诉浏览器将包含其中的文本以斜体字(italic)或者倾斜(oblique)字体显示。如果这种斜体字对该浏览器不可用的话,可以使用高亮、反白或加下划线等样式。

    提示: 标签一定要和结束标签 结合起来使用。

    注意:由于i同时也是icon的缩写,像bootstrap等一些流行的框架,也经常用标签来存储图标(icon),一般是用css写到标签中。

    实例:

    这里是缅甸北部

    这里是缅甸北部

    效果:

    1619162931965076.png

    展开全文
  • 一、认识I标签二、DIV+CSS去i斜体样式假如一个对象盒子CSS命名为“.CSS5”,其内使用了html i标签,这个使用我们想使用div css去掉其斜体样式,我们对对象i设置font-style:normal样式即可(扩展阅读:css font-style)...

    有时我们使用了斜体标签,但又想不然其对象不斜体显示,这个时候我们可以设置CSS样式来实现去掉i斜体标签css字体斜体样式。

    一、认识I标签

    二、DIV+CSS去i斜体样式

    假如一个对象盒子CSS命名为“.CSS5”,其内使用了html i标签,这个使用我们想使用div css去掉其斜体样式,我们对对象i设置font-style:normal样式即可(扩展阅读:css font-style)当然可以不用html i标签而通过font-style设置css斜体样式。

    CSS代码:

    .CSS5 i{ font-style:normal}

    三、CSS案例之去掉与没有去掉i斜体样式对比

    我们2个DIV对象盒子一个CSS 命名为“.CSS5”去掉其内标签斜体样式,另外一个div不设置class也不去掉i斜体样式

    .CSS5 i{ font-style:normal}

    /* CSS指针 让CSS5对象内的i标签才去掉斜体样式 */

    CSS5案例 我被去掉斜体样式

    CSS5案例 我未去掉斜体样式

    3、斜体去掉与非去掉对比案例截图

    0ba6e10495667df4e6468770ee12a02e.png

    CSS去掉斜体样式与没有去掉斜体对比

    四、扩展与总结

    去掉对象i标签斜体样式使用“font-style:normal”CSS样式即可实现。更多设置对象其它样式可以进入font-style教程学习。

    作者:css5

    展开全文
  • 使用i标签添加简单图标

    千次阅读 2020-08-05 11:10:53
    1.添加css样式 ... <link rel="stylesheet" href="${ctx}/webResources/css/font-awesome.min.css" />...i class="fa fa-warning" style="color:red;"></i><font style="color:red;">' + 1234
  • 通过i标签来添加图标

    千次阅读 2020-05-25 15:00:54
    在阿里的官方图标中,将需要的图标添加购物车,一并下载代码,unicode方式引用,可以修改iconfont中的图标的color来添加颜色
  • 【css】i标签icon图标旋转样式

    千次阅读 2021-01-07 13:36:08
    【css】i标签icon图标旋转样式【css】i标签icon图标旋转样式 【css】i标签icon图标旋转样式 代码示例: <i class="el-icon-refresh" style="font-size: 22px; animation: rotating 2s linear infinite reverse;...
  • i标签<i></i>不能对齐

    千次阅读 2019-08-22 16:40:45
    <...i style="width:12px ;height:24px;display:inline-block;background: red;"></i> <span class="text-sm" style="display:inline-block;margin-left:16px;height:24px;line-h...
  • 前端 i 标签 倾斜如何去除

    千次阅读 2019-10-22 12:26:27
    有时我们使用了斜体标签,但又想不然其对象不斜体显示,这个时候我们可以设置CSS样式来实现去掉i斜体标签css字体斜体样式。 需要给标签样式写这样的设置即可。 {font-style:normal;} ...
  • 有三个i标签,中间一个放文字,前后两个放的是iconfont 效果图如下: 会发现三个i标签渲染出来之后中间会有挺大的空隙: 尝试设置边距为0无果: 解决方法: 方法一:(不推荐) 去掉三个i标签前后的空格...
  • i 标签设置背景图片作 icon的问题

    千次阅读 2019-07-28 21:25:29
    写了一个 i 标签给它设置了宽高和背景图片,但是界面不显示,且宽高依然是0 .icon-name { background: url("../../img/username.png"); width: 40px; height: 35px; } **1、因为 i 标签是行内标签,它不可以...
  • css 去掉i标签默认斜体样式

    千次阅读 2019-09-22 16:01:31
    font-style: normal; 转载于:https://www.cnblogs.com/linjiangxian/p/11457368.html
  • html5 a标签,img标签,em和i标签,strong和b标签,q标签
  • 去掉i标签斜体样式

    万次阅读 2018-10-09 11:49:55
    斜体标签,但又想不然其对象不斜体显示,这个时候我们可以设置CSS样式来实现去掉i斜体标签css字体斜体样式。   需要给&lt;i&gt;标签样式写这样的设置即可。 {font-style:normal;} 效果如图所示:   ...
  • 【CSS3】用i标签用作小图标

    千次阅读 2019-10-01 20:57:34
    当position:absolute用在子标签当中时(父标签不使用position:relative),如果不设定子标签的位置,那么子标签就具有跟随性,父标签跑哪,子标签跟哪。 但是当子标签中出现哪怕一个空格或极小的间距,这种跟随性就...
  • Web前端笔记-i标签做小图标以及改源码注意事项

    千次阅读 多人点赞 2019-06-22 12:17:07
    最简单的使用i标签做小图标 修改前端源码注意的问题 最简单的使用i标签做小图标 运行截图如下: 实例结构如下: 此处就是使用i标签制作的小图标 其中html源码如下: <html> <head> <...
  • i标签添加背景图片背景大小问题

    千次阅读 2018-05-21 10:35:59
    background: url(../assets/img/arrow-right.png) no-repeat center;background-size: cover; /*background-size的cover特定值会保持图像本身的宽高比例,将图片缩放到正好完全覆盖定义背景的区域。...
  • html5有时使用 i 标签做小图标

    万次阅读 2018-07-08 16:09:49
    这个不是H5特有的情况,只是设计师习惯性用法,用i表示ico图标,便于他人理解。例子:
  • 1.登录后找到你喜欢的图片,加入购物车 ... 3.选择下载代码 使用代码1.解压如图所示,打开unicode2.使用类似如下代码<i class="iconfont">&#...</i>3.clss类必须包含 iconfont ,其中的内容跟实例 unicode编码相同即可
  • 后者有语义,前者则无。
  • i标签通过css写出一个向下的箭头

    千次阅读 2016-10-16 16:56:05
    "><i class="bottom-arrow"></i> .bottom-arrow:before{ content:""; border:7px solid #999; border-bottom:none; border-right-color:transparent; border-left-color:transparent; position...
  • i标签和em标签的区别

    千次阅读 2014-05-24 09:51:00
    i标签的作用:仅仅是为了让字体显示斜体,对于SEO没什么作用。 em标签的作用:不仅可以让字体显示斜体,而且可以加强语气,告诉搜索引擎这里是重要的。 转载于:https://www.cnblogs.com/webStyle/p/3749...
  • h标签,b标签,em,i ,u,s标签

    万次阅读 2021-08-12 22:52:19
    Html常用标签一、h标签1.简介2.使用原则3.案例二、b标签1.简介2.语法三、em标签1.简介2.案例四、em标签1.简介2.案例五、u标签1.简介2.案例六、s标签1.简介2.案例 一、h标签 1.简介 H1 H2 H3 H4标题标签常常使用...
  • 什么是<i标签

    千次阅读 2020-09-10 15:52:35
    i>标签? <i> 标签显示斜体文本效果。 <i> 标签和基于内容的样式标签 <em> 类似。它告诉浏览器将包含其中的文本以斜体字(italic)或者倾斜(oblique)字体显示。 所有浏览器都支持 <i> ...
  • html里面<i>和标签的区别

    千次阅读 2021-10-11 16:20:53
    i > 表示无意义的加粗,无意义的斜体,仅仅表示样式上是粗体或斜体,而没有强调的语义。 < em >表示一般的强调文本,这个标签具有语义。该标签中的内容在搜索引擎中更受重视,一些语音阅读器也会根据它在...
  • 样式如下: 方式一:使用图片 <template> <div class="main"> <div class="win"> ...i class="icon close-icon"/> </div> </div> </div> </t
  • html <i> 斜体标签

    千次阅读 2021-06-08 19:02:32
    html I斜体标签html i标签html标签之html字体斜体标签标签教程。html斜体标签是用于改动文字字体显现名目,i让字体斜着闪现。在结构中大面积使用不是很多,但在小部门为了达到排版都雅或某个须要,无意偶尔对文字...
  • 子节点i图标标签有vertical-align:middle属性。 为使得子节点内容都居中,父节点a标签设置如下属性: line-height:2rem; text-align:center; 图标与文字“Delete”没有对齐,文字“Delete”居中了,然而icon图标...
  • td中这段代码 在浏览器中显示了两个i标签 这是什么啊 求大神指导 ``` <td width="9%"><a href="../city/query.html?interfaceId=${interfacesList.interfaceId}" title...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 915,857
精华内容 366,342
关键字:

i标签

友情链接: Arquivo.zip