前端通过 CSS 为 <i> 标签(图标)和 <span> 标签(文本)设置不同的样式

<div class="icon-text">

<i class="icon_name"></i>

<span class="text_name">名称</span>

</div>
.icon-text {

display: flex; /* 使用 flexbox 布局 */

align-items: center; /* 垂直居中对齐 */

}

.icon_name {

display: block; /* 使图标可以使用背景 */

width: 24px; /* 指定图标宽度 */

height: 24px; /* 指定图标高度 */

background-image: url('/src/assets/images/icon-name.png'); /* 图标背景 */

background-size: cover; /* 背景图片铺满 */

background-position: center; /* 背景图片居中 */

background-repeat: no-repeat; /* 背景不重复 */

margin-right: 8px; /* 图标和文本之间的间距 */

}

.text_name {

font-size: 16px; /* 文本字号 */

color: #333; /* 文本颜色 */

}

相关推荐
NetX行者几秒前
基于Vue 3的AI前端框架汇总及工具对比表
前端·vue.js·人工智能·前端框架·开源
独立开阀者_FwtCoder几秒前
手握两大前端框架,Vercel 再出手拿下 Nuxt.js,对前端有什么影响?
前端·javascript·vue.js
独立开阀者_FwtCoder1 分钟前
弃用 html2canvas!快 93 倍的截图神器!
前端·javascript·vue.js
weixin_3993806916 分钟前
TongWeb8.0.9.0.3部署后端应用,前端访问后端报405(by sy+lqw)
前端
伍哥的传说36 分钟前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript
洛小豆1 小时前
深入理解Pinia:Options API vs Composition API两种Store定义方式完全指南
前端·javascript·vue.js
洛小豆1 小时前
JavaScript 对象属性访问的那些坑:她问我为什么用 result.id 而不是 result['id']?我说我不知道...
前端·javascript·vue.js
叹一曲当时只道是寻常1 小时前
Softhub软件下载站实战开发(十六):仪表盘前端设计与实现
前端·golang
超级土豆粉1 小时前
npm 包 scheduler 介绍
前端·npm·node.js
bug爱好者1 小时前
原生小程序如何实现跨页面传值
前端·javascript