前端通过 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; /* 文本颜色 */

}

相关推荐
柯腾啊41 分钟前
“Script error.”的产生原因和解决办法
前端·javascript·浏览器
沙漠之皇44 分钟前
ts 定义重复对象字段
前端
HashTang1 小时前
不用再配服务器了!这套 Next.js + Cloudflare 模板,一个人搞定全栈出海
前端·后端·边缘计算
前端架构师-老李2 小时前
16 Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
一只学java的小汉堡2 小时前
HTML 01入门:从概念到开发环境搭建与页面头部配置
前端·css·html
用户21496515898753 小时前
从零搭建uniapp环境-记录
前端
努力写代码的熊大4 小时前
stack、queue与priority_queue的用法解析与模拟实现
java·前端·javascript
im_AMBER4 小时前
React 06
前端·javascript·笔记·学习·react.js·前端框架
wyzqhhhh5 小时前
前端常见的设计模式
前端·设计模式
IT_陈寒5 小时前
React 19重磅前瞻:10个性能优化技巧让你少写30%的useEffect代码
前端·人工智能·后端