<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
相关推荐
燃先生._.6 分钟前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)高山我梦口香糖1 小时前
[react]searchParams转普通对象唯之为之1 小时前
巧用mask属性创建一个纯CSS图标库m0_748235241 小时前
前端实现获取后端返回的文件流并下载m0_748240252 小时前
前端如何检测用户登录状态是否过期black^sugar2 小时前
纯前端实现更新检测寻找沙漠的人3 小时前
前端知识补充—CSSGISer_Jing3 小时前
2025前端面试热门题目——计算机网络篇m0_748245523 小时前
吉利前端、AI面试