【CSS】文頭にアイコンを表示

方法

①擬似要素の利用

• html

<ul class="list_nav_header">
  <li><a href="#">ABOUT.</a></li>
  <li><a href="#">FEATURE.</a></li>
  <li><a href="#">PROFILE.</a></li>
  <li><a class="btn_ico_mail" href="#">CONTACT.</a></li>
</ul>

• css

[class*="btn_ico"] {
    display: block;
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 30px 0 60px;
    font: 400 18px/1em 'futura', 'noto sans japanese', sans-serif;
    background: #00CCFF;
    position: relative;
}

[class*="btn_ico"]:before {
    content: "";
    display: block;
    width: 40px; /*svgの大きさに合わせる*/
    height: 40px;　/*svgの大きさに合わせる*/
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute; /*元のテキストはposition: relativeの必要あり*/
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
}

[class*="btn_ico"][class*="mail"]:before {
    background: url(../img/ico/ico_mail.svg);
}