<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
相关推荐
哆啦A梦15881 小时前
搜索页面布局_院长大人_1 小时前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签哆啦A梦15883 小时前
axios 的二次封装阿珊和她的猫3 小时前
深入理解与手写发布订阅模式yinuo3 小时前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排snow@li3 小时前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法浪裡遊5 小时前
Nivo图表库全面指南:配置与用法详解漂流瓶jz6 小时前
快速定位源码问题:SourceMap的生成/使用/文件格式与历史samroom6 小时前
iframe实战:跨域通信与安全隔离fury_1236 小时前
vue3:数组的.includes方法怎么使用