文字和小图标实例

发表于 | 分类于

文字和小图标实例

方法一

  • 适合场景 图标的位置在文字附近
  • 缺点 icon的位置不能自由控制
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.con {
    width: 500px;
    margin: 50px auto;
}

h3 {
    font-weight: 400;
    font-size: 18px;
    height: 35px;
    line-height: 35px;
}

i {
    display: inline-block;
    width: 12px;
    height: 12px;
    /*控制水平*/
    margin-right: 5px;
    /*控制垂直*/
    vertical-align: -1px;
    background-image: url('./icon01.png');
    background-repeat: no-repeat;
    background-size: 100%;
}
1
2
3
<div class="con">
    <h3><i></i>梁嘉裕梁嘉裕</h3>
</div>

方法二

  • 适合场景 不做动态 后期不会做修改的
  • 缺点 不方便修改和做效果
1
2
3
4
5
6
7
8
9
10
11
12
h3 {
    font-weight: 400;
    font-size: 18px;
    height: 35px;
    line-height: 35px;
    /*将文字和图标隔开*/
    padding-left: 30px;
    background-image: url('./icon01.png');
    background-repeat: no-repeat;
    /*控制图标的位置*/
    background-position: left;
}
1
2
3
<div class="con">
    <h3>梁嘉裕梁嘉裕</h3>
</div>

方法三

  • 适合场景 要求位置自由比较高的
  • 缺点 要计算位置和父元素相对定位
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
h3 {
    position: relative;
    font-weight: 400;
    font-size: 18px;
    height: 35px;
    line-height: 35px;
}

.icon {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -6px;
    width: 12px;
    height: 12px;
    background-image: url('./icon01.png');
    background-repeat: no-repeat;
}
1
2
3
4
5
<div class="con">
    <h3>梁嘉裕梁嘉裕
        <div class="icon"></div>
    </h3>
</div>