요소의 css 선택자를 이용하여 앞이나 뒤에 아이콘을 추가하는 방법을 정리하고자 합니다.
우선 아래 font-awesome의 스타일시트를 링크 html 이나, css에 추가하여 스타일시트가 링크 되도록 설정합니다.

/*html 페이지 추가시*/
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
/*style css 상에 추가시*/
@import url(‘https://use.fontawesome.com/releases/v5.0.6/css/all.css’);

사용하고자하는 아이콘 형태를 확인할때는 fontawesome.com 의 icons 메뉴에서 확인할 수 있습니다.
자 이제 추가하고자하는 곳의 css 선택자를 지정하고 해당 부분에 아이콘을 추가하기위해서는 아래 예제를 참고합니다.

.선택자 h1::before {
content: “f105”; /* fontawesome.com에서 넣고자하는 아이콘의 코드로 변경하여 사용하면됩니다.*/
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}

/* 아이콘의 위치를 변경하고 싶을 때 */

.선택자 h1 {
position: relative;
}

.선택자 h1::before {
position: absolute;
left: -25px;
}

STAY IN THE LOOP

Subscribe to our free newsletter.

[fusion_form form_post_id="4569" margin_bottom="0" hide_on_mobile="small-visibility,medium-visibility,large-visibility" /]

Related Posts

View all
  • Continue reading
  • Continue reading
  • Continue reading
  • Continue reading