<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
相关推荐
ZC跨境爬虫3 小时前
跟着 MDN 学 HTML day_9:(信件语义标记)前端老石人3 小时前
HTML 字符引用完全指南幼儿园技术家4 小时前
前端如何设计权限系统(RBAC / ABAC)?摇滚侠5 小时前
外边距问题 塌陷问题 HTML CSS前端摸鱼匠5 小时前
Vue 3 的v-bind合并行为:讲解v-bind与普通属性合并的规则REDcker6 小时前
浏览器端Web程序性能分析与优化实战 DevTools指标与工程清单W.A委员会6 小时前
CSS中的单位donecoding7 小时前
一个 sudo 引发的血案:npm 全局包权限错乱彻底修复风骏时光牛马7 小时前
Raku正则匹配与数据批量处理实操案例nbwenren7 小时前
2026实测:Gemini 3 镜像站视觉能力实践——拍照原型图,一键生成 HTML+CSS 代码