<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
相关推荐
艾小码3 分钟前
手把手教你实现一个EventEmitter,彻底告别复杂事件管理!幸福摩天轮13 分钟前
npm发布包前端AK君15 分钟前
Gitlab 线上合并冲突的坑ze_juejin15 分钟前
ES6 Module 深入学习章丸丸18 分钟前
Tube - Studio Videos因吹斯汀1 小时前
一饭封神:当AI厨神遇上你的冰箱,八大菜系大师在线battle!心一信息1 小时前
ThreeJS骨骼示例再学一点就睡1 小时前
NATAPP 内网穿透指南:让本地项目轻松 “走出去”拜无忧1 小时前
2025最新React项目架构指南:从零到一,为前端小白打造稻草人不怕疼1 小时前
记一次从“按钮点不动”到“窗口派发缺失”的排查过程