Font awesome에 대해 알아보자

font awesome은 웹 개발에서 아이콘을 사용할 때 유용한 무료 아이콘 라이브러리입니다. 이 라이브러리를 사용하면 다양한 아이콘을 쉽게 웹사이트에 추가할 수 있습니다. font awesome에는 6,000개가 넘는 아이콘이 포함되어 있으며, 이 아이콘들은 CSS 클래스를 통해 쉽게 사용할 수 있습니다.

font awesome을 사용하려면 먼저 웹사이트에 font awesome 라이브러리를 추가해야 합니다. 이를 위해서는 <link> 태그를 사용하여 CSS 파일을 연결하고, <script> 태그를 사용하여 JavaScript 파일을 연결해야 합니다. 이후에는 원하는 아이콘을 웹페이지에 추가하기 위해  태그를 사용하고, 해당 아이콘의 CSS 클래스를 지정하면 됩니다.

예를 들어, fa fa-heart 클래스를 사용하면 하트 아이콘을 표시할 수 있습니다. 이와 같이 다양한 아이콘 클래스를 사용하여 웹사이트에 원하는 아이콘을 추가할 수 있습니다. 또한, font awesome은 다양한 크기와 색상 옵션을 제공하여 아이콘을 사용자 정의할 수 있습니다.

font awesome은 커뮤니티의 지속적인 지원과 업데이트로 인해 인기를 얻고 있는 아이콘 라이브러리입니다. 웹 개발자들 사이에서 널리 사용되며, 사용하기 쉽고 다양한 아이콘을 제공하는 장점이 있습니다. 따라서 웹사이트에 아이콘을 추가하고 싶을 때 font awesome를 고려해볼 수 있습니다.

요소의 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;
}

font awesome 아이콘을 사용하는 방법에 대해 알아보자

font awesome 라이브러리 추가: 웹사이트의 <head> 태그 안에 다음과 같은 코드를 추가하여 font awesome 라이브러리를 연결합니다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

이 코드는 font awesome의 최신 버전을 사용하며, CDN(Contents Delivery Network)을 통해 라이브러리 파일을 가져옵니다.

아이콘 추가: 아이콘을 표시하려는 곳에  태그를 사용하고, 해당 아이콘의 CSS 클래스를 지정합니다. 예를 들어, 하트 아이콘을 추가하려면 다음과 같이 작성합니다.

<i class="fas fa-heart"></i>

위의 코드에서 fas는 솔리드 스타일의 아이콘을 나타내는 클래스이고, fa-heart는 하트 아이콘을 나타내는 클래스입니다. 이와 같이 아이콘 클래스를 지정하여 원하는 아이콘을 표시할 수 있습니다.

스타일 및 크기 설정 (선택 사항): font awesome 아이콘에는 다양한 스타일과 크기 옵션을 제공합니다. 예를 들어, 아이콘의 크기를 조절하려면  태그에 fa-xs, fa-sm, fa-lg, fa-2x, fa-3x 등의 클래스를 추가할 수 있습니다. 또한, 아이콘의 색상을 변경하려면  태그에 style 속성을 사용하여 CSS 스타일을 지정할 수 있습니다.

이렇게 하면 font awesome 아이콘을 웹사이트에 추가하고 사용할 수 있습니다. 원하는 아이콘을 선택하고 해당 아이콘의 CSS 클래스를 지정하여 웹페이지에 아이콘을 표시할 수 있습니다.

아이콘 색상을 변경하자면

아이콘의 색상을 변경하는 방법은 다음과 같습니다:

스타일 직접 지정:  태그에 style 속성을 사용하여 직접 색상을 지정할 수 있습니다. 예를 들어, 아이콘을 빨간색으로 변경하려면 다음과 같이 작성합니다.

<i class="fas fa-heart" style="color: red;"></i>

위의 코드에서 style="color: red;" 부분은 아이콘의 색상을 빨간색으로 지정하는 부분입니다. 이와 같이 style 속성을 사용하여 아이콘의 색상을 직접 지정할 수 있습니다.

클래스 변경: font awesome는 다양한 색상 클래스를 제공합니다.  태그에 아이콘의 색상 클래스를 추가하여 색상을 변경할 수 있습니다. 예를 들어, 아이콘을 빨간색으로 변경하려면 다음과 같이 작성합니다.

<i class="fas fa-heart text-danger"></i>

위의 코드에서 text-danger 클래스는 아이콘의 색상을 빨간색으로 변경하는 클래스입니다. font awesome에서는 text- 접두사를 사용하여 색상 클래스를 지정합니다. 따라서 원하는 색상 클래스를 사용하여 아이콘의 색상을 변경할 수 있습니다.

부모 요소의 색상 상속: font awesome 아이콘은 부모 요소의 색상을 상속받을 수도 있습니다. 부모 요소에 원하는 색상을 지정하면 아이콘도 해당 색상을 상속받아 표시됩니다. 이 방법은 부모 요소의 스타일이 변경되면 아이콘의 색상도 자동으로 변경되는 장점이 있습니다.

위의 방법 중 하나를 사용하여 font awesome 아이콘의 색상을 변경할 수 있습니다. 직접 스타일을 지정하거나 클래스를 변경하여 원하는 색상을 적용할 수 있습니다.

/*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’);

.선택자 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;
}

font awesome 아이콘을 사용하는 방법에 대해 알아보자

font awesome 라이브러리 추가: 웹사이트의 <head> 태그 안에 다음과 같은 코드를 추가하여 font awesome 라이브러리를 연결합니다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

이 코드는 font awesome의 최신 버전을 사용하며, CDN(Contents Delivery Network)을 통해 라이브러리 파일을 가져옵니다.

아이콘 추가: 아이콘을 표시하려는 곳에  태그를 사용하고, 해당 아이콘의 CSS 클래스를 지정합니다. 예를 들어, 하트 아이콘을 추가하려면 다음과 같이 작성합니다.

<i class="fas fa-heart"></i>

스타일 및 크기 설정 (선택 사항): font awesome 아이콘에는 다양한 스타일과 크기 옵션을 제공합니다. 예를 들어, 아이콘의 크기를 조절하려면  태그에 fa-xs, fa-sm, fa-lg, fa-2x, fa-3x 등의 클래스를 추가할 수 있습니다. 또한, 아이콘의 색상을 변경하려면  태그에 style 속성을 사용하여 CSS 스타일을 지정할 수 있습니다.

Font awesome에 대해 알아보자