요소의 css 선택자를 이용하여 앞이나 뒤에 아이콘을 추가하는 방법을 정리하고자 합니다.

우선 아래 font-awesome의 스타일시트를 링크 html 이나, css에 추가하여 스타일시트가 링크 되도록 설정합니다.



/* html 상에 추가 */

<
link href=“https://use.fontawesome.com/releases/v5.0.6/css/all.css” rel=“stylesheet”>
/*또는 css 시트상에 아래내용을 추가합니다. */
@import url(‘https://use.fontawesome.com/releases/v5.0.6/css/all.css’);
 
/* html 상에 추가 */
<link href=”https://use.fontawesome.com/releases/v5.0.6/css/all.css” rel=”stylesheet”>/*또는 css 시트상에 아래내용을 추가합니다. */
@import url(‘https://use.fontawesome.com/releases/v5.0.6/css/all.css’);
/* html 상에 추가 */
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"> 

/*또는 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;
}
 
.선택자 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;
}
.선택자 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;
}