<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; /* 文本颜色 */
}
前端通过 CSS 为 <i> 标签(图标)和 <span> 标签(文本)设置不同的样式
susu10830189112024-10-10 10:53
相关推荐
莪_幻尘1 小时前
Skill 体检:30 个 Skill 全凭感觉?体检器先自曝了 8 个“假 0 分风骏时光牛马1 小时前
AI模型综合能力评测:性能、指令遵循与多场景实测对比Frag0ut1 小时前
Chrome与Chromium内核浏览器在Windows 11上的新特性全景解析hiahiahia1232 小时前
实现完整 Tool DispatcherIT_陈寒2 小时前
Java线程池这破玩意,差点让我周末加班排查到凌晨Mr_Mao2 小时前
告别选型困难!集 VueUse、ahooks、Mantine 于一身:286 个 Hook 的 ReaUse 来了泡海椒3 小时前
趋势分析报表:jquick-pdf折线图PDF生成实战默_笙3 小时前
🚙 一条腿走路会摔:ES 关键词检索、混合召回与 ReRank 裁判YIAN3 小时前
从跨域代理到 WebSocket:梳理前端实时通信的底层逻辑与完整实践一曲终散4 小时前
创建 SVG 图标预览页面:从零实现到解决 CORS 问题