Font awesome에 대해 알아보자
Font awesome에 대해 알아보자
font awesome은 웹 개발에서 아이콘을 사용할 때 유용한 무료 아이콘 라이브러리입니다. 이 라이브러리를 사용하면 다양한 아이콘을 쉽게 웹사이트에 추가할 수 있습니다. font awesome에는 6,000개가 넘는 아이콘이 포함되어 있으며, 이 아이콘들은 CSS 클래스를 통해 쉽게 사용할 수 있습니다.
font awesome을 사용하려면 먼저 웹사이트에 font awesome 라이브러리를 추가해야 합니다. 이를 위해서는 <link> 태그를 사용하여 CSS 파일을 연결하고, <script> 태그를 사용하여 JavaScript 파일을 연결해야 합니다. 이후에는 원하는 아이콘을 웹페이지에 추가하기 위해 <i> 태그를 사용하고, 해당 아이콘의 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)을 통해 라이브러리 파일을 가져옵니다.
- 아이콘 추가: 아이콘을 표시하려는 곳에
<i>태그를 사용하고, 해당 아이콘의 CSS 클래스를 지정합니다. 예를 들어, 하트 아이콘을 추가하려면 다음과 같이 작성합니다.
<i class="fas fa-heart"></i>
위의 코드에서 fas는 솔리드 스타일의 아이콘을 나타내는 클래스이고, fa-heart는 하트 아이콘을 나타내는 클래스입니다. 이와 같이 아이콘 클래스를 지정하여 원하는 아이콘을 표시할 수 있습니다.
- 스타일 및 크기 설정 (선택 사항): font awesome 아이콘에는 다양한 스타일과 크기 옵션을 제공합니다. 예를 들어, 아이콘의 크기를 조절하려면
<i>태그에fa-xs,fa-sm,fa-lg,fa-2x,fa-3x등의 클래스를 추가할 수 있습니다. 또한, 아이콘의 색상을 변경하려면<i>태그에style속성을 사용하여 CSS 스타일을 지정할 수 있습니다.
이렇게 하면 font awesome 아이콘을 웹사이트에 추가하고 사용할 수 있습니다. 원하는 아이콘을 선택하고 해당 아이콘의 CSS 클래스를 지정하여 웹페이지에 아이콘을 표시할 수 있습니다.
아이콘 색상을 변경하자면
아이콘의 색상을 변경하는 방법은 다음과 같습니다:
- 스타일 직접 지정:
<i>태그에style속성을 사용하여 직접 색상을 지정할 수 있습니다. 예를 들어, 아이콘을 빨간색으로 변경하려면 다음과 같이 작성합니다.
<i class="fas fa-heart" style="color: red;"></i>
위의 코드에서 style="color: red;" 부분은 아이콘의 색상을 빨간색으로 지정하는 부분입니다. 이와 같이 style 속성을 사용하여 아이콘의 색상을 직접 지정할 수 있습니다.
- 클래스 변경: font awesome는 다양한 색상 클래스를 제공합니다.
<i>태그에 아이콘의 색상 클래스를 추가하여 색상을 변경할 수 있습니다. 예를 들어, 아이콘을 빨간색으로 변경하려면 다음과 같이 작성합니다.
<i class="fas fa-heart text-danger"></i>
위의 코드에서 text-danger 클래스는 아이콘의 색상을 빨간색으로 변경하는 클래스입니다. font awesome에서는 text- 접두사를 사용하여 색상 클래스를 지정합니다. 따라서 원하는 색상 클래스를 사용하여 아이콘의 색상을 변경할 수 있습니다.
- 부모 요소의 색상 상속: 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)을 통해 라이브러리 파일을 가져옵니다.
- 아이콘 추가: 아이콘을 표시하려는 곳에
<i>태그를 사용하고, 해당 아이콘의 CSS 클래스를 지정합니다. 예를 들어, 하트 아이콘을 추가하려면 다음과 같이 작성합니다.
<i class="fas fa-heart"></i>
위의 코드에서 fas는 솔리드 스타일의 아이콘을 나타내는 클래스이고, fa-heart는 하트 아이콘을 나타내는 클래스입니다. 이와 같이 아이콘 클래스를 지정하여 원하는 아이콘을 표시할 수 있습니다.
- 스타일 및 크기 설정 (선택 사항): font awesome 아이콘에는 다양한 스타일과 크기 옵션을 제공합니다. 예를 들어, 아이콘의 크기를 조절하려면
<i>태그에fa-xs,fa-sm,fa-lg,fa-2x,fa-3x등의 클래스를 추가할 수 있습니다. 또한, 아이콘의 색상을 변경하려면<i>태그에style속성을 사용하여 CSS 스타일을 지정할 수 있습니다.
이렇게 하면 font awesome 아이콘을 웹사이트에 추가하고 사용할 수 있습니다. 원하는 아이콘을 선택하고 해당 아이콘의 CSS 클래스를 지정하여 웹페이지에 아이콘을 표시할 수 있습니다.
