关于解决用<i>标签做图标不能显示的问题

最新推荐文章于 2023-05-22 16:36:31 发布
最新推荐文章于 2023-05-22 16:36:31 发布
阅读量6.2k 收藏 1
点赞数 3
分类专栏： 前端学习 文章标签： 标签 前端 css html5 web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuanmoding/article/details/72617623
版权

今天在做一个项目时，用到<i>标签来做小图标，发现设置完相关样式，小图标尽然不能显示，找了许多办法都不能解决，后来我发现原来<i> 标签是行内元素，定义宽高无效，应把它转换为块级元素，于是我设置了display:inline-block 属性，发现小图标显示了。

以下是代码图片：
这里写图片描述

这里写图片描述

轩陌Ding
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
i 标签设置背景图片作 icon的问题
moon_tang的博客
07-28 8719
写了一个 i 标签给它设置了宽高和背景图片，但是界面不显示,且宽高依然是0 .icon-name { background: url("../../img/username.png"); width: 40px; height: 35px; } **1、因为 i 标签是行内标签，它不可以设置宽高。**所以上面设置宽高不起作用 让 i 标签...
i图标标签元素与span行内元素内容不对齐的解决方法
weixin_41993525的博客
12-27 4805
Dom结构大致是： <a> <i>图标</i> <span>Delete</span> </a> 如上图， 子节点i图标标签有vertical-align:middle属性。 为使得子节点内容都居中，父节点a标签设置如下属性： line-height:2rem; text-align:center; 图标与文字“Delete”没有对齐，文字“Delete”居中了，然而icon图标并未居中。在icon字体图标具有vert.
关于解决用＜i＞标签做图标不能显示的问题
qq_38472465的博客
08-22 1359
关于解决用<i>标签做图标不能显示的问题
Vue 不出现图标
qq_45891604的博客
02-07 392
Vue 图标 导航栏
i、span不显示图片，设置宽高不显示
前台技术
11-09 4366
背景图片不显示 为什么？搞了好半天，最后搞明白原理。 i、span是内联元素，内联元素不可设置宽高，所以设置了宽高不显示图片。 解决： 设置display:block;将内联元素转换为块级元素，然后设置宽高，就可以显示了。 css文件中： i{width:18px;height:20px;display:block;background-image: url(../img/1.png);
使用＜i＞标签循环图片时图片不能显示的问题
qq_40462272的博客
03-14 541
要在标签里定义属性，display:inline-box;否则设置宽高无效，图片不能显示，示例如下：
关于layui的动态图标不显示的解决方法
10-16
通过以上步骤，大部分layui动态图标不显示的问题都能得到解决。在实际开发中，遇到问题时不要忘记利用浏览器的开发者工具进行排查，这能极大地帮助你找到问题所在并迅速修复。同时，熟悉layui的文档和社区资源也是...
<template> <div class="home"> <el-row class="header"> <el-col :span="24"> <!-- 头部内容 --> <h1>后台管理系统</h1> <a href="#" @click="handleLogout">注销</a> </el-col> </el-row> <el-row class="content"> <el-col :span="6" class="sidebar"> <!-- 侧边栏 --> <el-menu :default-active="activeMenu" class="menu"> <el-menu-item index="1"> <i class="el-icon-s-home"></i> <span>首页</span> </el-menu-item> <el-menu-item index="/category"> <i class="el-icon-s-data"></i> <span>分类管理</span> <router-link to="/category"> <el-menu-item>分类管理</el-menu-item> </router-link> </el-menu-item> <el-menu-item index="3"> <i class="el-icon-s-tools"></i> <span>系统设置</span> </el-menu-item> </el-menu> </el-col> <el-col :span="18" class="main"> <!-- 主要内容 --> <router-view ></router-view> </el-col> </el-row> <el-row class="footer"> <el-col :span="24"> <!-- 底部信息 --> 版权所有 © 2022 后台管理系统 </el-col> </el-row> </div> </template>还是会跳到新页面
最新发布
07-15
根据你提供的代码，问题出现在你在 `<router-link>` 标签内嵌套了 `<el-menu-item>` 标签。这样会导致 `<el-menu-item>` 标签成为嵌套关系中的子菜单项，而不是路由链接。 为了解决这个问题，你应该将 `<router-...
解决layer图标icon不加载的问题
10-16
在使用layer组件库时，我们可能会遇到图标不显示的问题。layer是一个基于jQuery的轻量级弹框组件库，广泛用于Web页面中创建模态框、提示框、加载动画等。如果在项目中引入layer后，弹框内的图标没有正常显示，这将会...
在Vue3中使用Element Plus时 el-icon无法显示的问题
web15185420056的博客
03-06 739
问题描述 按照官方文档安装了icons $ npm install @element-plus/icons 然后在页面中使用 <template> <!-- <Header /> --> <!-- Icon 图标 --> <el-icon><edit /></el-icon> <el-icon><fold /></el-icon> <el-icon>&
vue3 element plus动态添加图标
qq_43777788的博客
05-09 2494
element icon 直接使用类名就可以实现 <i class="el-icon-edit"></i> element plus icon 变成直接使用svg图片，当我动态的时候渲染时，就需要用到 vue3 的 :is //单一固定的 <el-icon><apple /></el-icon> ** 新的 attribute :is** :is 动态使用组件。有的时候你可能需要 Vue 将一个原生元素替换为一个 Vue 组件，这时你可以把
element-plus 图标不显示的问题
qq_52102677的博客
11-01 2584
element-plus 图标不显示问题
Bootstrap样式不生效的解决方法
Meng_xuan_12345的博客
05-22 2605
Bootstrap样式不生效的解决方法
html语言中<i>< i>,html元素 i 标签的使用方法及作用
weixin_35632331的博客
05-30 3483
html元素标签是英文单词“italic”的缩写，中文有“斜体”的意思，主要是用来定义斜体文本效果的，有关该标签的使用方法及作用详解如下：标签的定义标签告诉浏览器将标记的文本以斜体方式呈现出来；标签是双标签，标记的文本必须在和之间；标签被用来表示科技术语、其他语种的成语俗语、想法、宇宙飞船的名字等等。标签中的文本显示为斜体，代表一定范围的文本具有特别的语义。浏览器支持情况标签已被所有主流浏览器支持...
layui图标无法正常显示(乱码（）)
慕白Lee的博客
03-29 1万+
方案1：项目初建的情况，忘记引入font文件夹 方案2：js和css/font不在同一个文件夹下 方案3：使用layui-icon时出现了默认图标问题(网路截图) 方案4：原因：经过maven的filter，会破坏font文件的二进制文件格式，导致前台解析出错。...
vue自定义网页标签图标不生效的原因和解决办法
HYEHYEHYE的博客
07-19 6173
正常情况下，自定义网页标签图标我们只需要更换下图中的favicon.ico即可，但是最近做项目遇到直接替换favicon.ico有不生效的问题 用.jpg或.png格式制作成.ico图标的网站有很多，这里推荐一个比特虫：https://www.bitbug.net/ 发现问题原因 后来发现项目使用了@vue/cli-plugin-pwa插件https://www.npmjs.com/package/@vue/cli-plugin-pwa 打开上面链接后可以看到插件更改了网页标签图标的路径
关于网站icon小图标在网站上不显示的问题解决办法
热门推荐
u011519993的博客
07-15 1万+
关于网站ico小图标在网站上不显示的问题第一次发表新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 第一次发表 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器,
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值