前端通过 CSS 为 <i> 标签(图标)和 <span> 标签(文本)设置不同的样式

<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; /* 文本颜色 */

}

相关推荐
excel12 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel13 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼15 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping15 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙16 小时前
[译] Composition in CSS
前端·css
白水清风16 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix16 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780016 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端16 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧16 小时前
Promise 的使用
前端·javascript