其他分享
首页 > 其他分享> > Web实现：图标加文字 伪元素实现 一般实现

Web实现：图标加文字 伪元素实现 一般实现

作者：互联网

图标加文字的两种实现方式：
第一种方式：插入背景图
第一种
HTML部分代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
<span class="icon"></span>
<span class="words">主页</span>
</body>

</html>

CSS部分代码：

.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(https://qgt-document.oss-cn-beijing.aliyuncs.com/P3-2-HTML-CSS/1.2/source/first-page.png) no-repeat center;
  background-size: contain;
  vertical-align: top;
  margin-right: 4px;
}
.words {
  font-size: 18px;
  line-height: 24px;
  
}

第二种方式：伪元素
第二种
HTML部分代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
<span>主页</span>
</body>

</html>

CSS部分代码：

span{
  position: relative;
  padding-left: 28px;
  font-size: 18px;
  line-height: 24px;
  
}
span::before {
  content: '';
  position: absolute;
  left: 0px;
  width: 24px;
  height: 24px;
  background: url(https://qgt-document.oss-cn-beijing.aliyuncs.com/P3-2-HTML-CSS/1.2/source/first-page.png) no-repeat center;
  background-size: contain;
}

标签：Web,实现,height,HTML,CSS,background,图标,24px,size
来源： https://blog.csdn.net/jasmyn518/article/details/122643856