【CSS篇】icon的布局方式_css icon实现

在平时访问的页面中，都会有这种文字描述+icon的布局，下面介绍两种方法去实现：

使用<i></i> 标签实现：

        <li class="item">
          <a href="#" class="growth">
            <i class="icon-growth"></i>
            成长守护平台
          </a>
        </li>
1
2
3
4
5
6

.item a {
	position: relative;
	display: block;
}
.item .growth {
	padding-left: 30px; // 给icon留位置
}
.item .icon-growth {
	position: absolute;
	width: 30px;
	height: 30px;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto 0;
	background: url(./img/top_sprite.webp) no-repeat -30px 0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

使用伪元素实现

<li class="item">
	<a href="#" class="ranking">腾讯游戏排行榜</a>
</li>
1
2
3

.item a {
	position: relative;
	display: block;
}
.ranking {
    padding-right: 25px; // 给icon留位置
}
.ranking::after {
      content: "";
      position: absolute;
      top: 5px;
      right: 3px;
      width: 30px;
      height: 30px;
      background: url(./img/top_sprite.webp) no-repeat 0 0;
      opacity: .1;
      transform: rotate(90deg);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

总结

上面两个办法都是可以实现效果的，需要注意的是元素设置position: absolute;后脱离文档流，是不占位置的，需要给父元素设置relative，并且设置对应的padding给icon留出位置