前端通过 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; /* 文本颜色 */

}

相关推荐
幼儿园技术家6 分钟前
Uniapp简易使用canvas绘制分享海报
前端
开开心心就好1 小时前
免费PDF处理软件,支持多种操作
运维·服务器·前端·spring boot·智能手机·pdf·电脑
全宝1 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
没有钱的钱仔1 小时前
STM32低功耗模式全面指南
css·stm32·css3
yanlele1 小时前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
妮妮喔妮2 小时前
【无标题】
开发语言·前端·javascript
谦行2 小时前
深度神经网络训练过程与常见概念
前端
Simon_He2 小时前
一个免费的在线压缩网站超越了付费的压缩软件
前端·开源·图片资源
巴巴_羊3 小时前
React Ref使用
前端·javascript·react.js
拾光拾趣录3 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css