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

}

相关推荐
fox_lht14 小时前
DBeaver的LightGrid 类所有函数详细分析
前端
钛态15 小时前
前端TypeScript高级技巧:让你的代码更安全
前端·vue·react·web
光影少年15 小时前
前端在页面渲染优化和组件优化经验?
前端·vue.js·react.js·前端框架
yqcoder15 小时前
CSS 迷思破解:`:nth-child` vs `:nth-of-type`
前端·css
时寒的笔记15 小时前
某陆飞11期_webpack案例
前端·webpack·node.js
漫游的渔夫15 小时前
前端开发者做多步 Agent:别让 AI 边想边乱跑,用 Plan-Act-Observe 稳住 4 步任务
前端·人工智能·typescript
一锤捌拾16 小时前
V8引擎精品漫游指南--Ignition篇(下 一) 动态执行前的事情
前端·javascript
遇见~未来16 小时前
第六篇_CSS进阶_深入浏览器与工程化
前端·css·rust
Cache技术分享16 小时前
397. Java 文件操作基础 - 创建常规文件与临时文件
前端·后端
Daybreak16 小时前
Vercel Serverless 调国内 AI 接口 504?Edge Runtime 救了我
前端