<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
相关推荐
魔术师Grace1 分钟前
真正值钱的 AI 小工具,可能只是帮人少打一遍字用户新3 小时前
JS事件深度解析四 事件的循环和异步广州灵眸科技有限公司9 小时前
瑞芯微RV1126B开发板(EASY-EAI-PI2) Easy-Eai编译环境准备与更新万少10 小时前
我把 Kimi 接进微信,几分钟做了个随手出图助手xiaofeichaichai10 小时前
网络请求与实时通道kTR2hD1qb10 小时前
从 Responses API 到 Chat Completions:一个模型网关的设计复盘kyriewen12 小时前
浏览器缓存最强攻略:强缓存、协商缓存、CDN、更新策略,一篇搞定持敬chijing12 小时前
Web渗透之SQL注入-联合查询注入-注入点数据类型判断LIUAWEIO13 小时前
CSS 让鼠标呈现手型,鼠标悬浮变小手