FontAwesome

점 설치 학습 메모입니다.

FontAwesome 사이트에 가서 키트의 script 태그를 복사해 온다.

head에 포함

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UST-8">
    <title>MyFontAwesome</title>
    <link rel="stylesheet" href="css/styles.css">
    <script src="https://kit.fontawesome.com/496f164843.js" crossorigin="anonymous"></script>
</head>

body에 포함

i 태그, 클래스는 fas fa-ad my-icon
내용은 아이콘의 페이지에 써 있다↓
태그를 클릭하면 그대로 복사할 수 있다

<body>
    <i class="fas fa-ad my-icon"></i>
</body>

- fas 채우기 solid
- far 흰색 제거 regular
- fal 얇은 선 light
- fab 트위터 등 brand

- fa-ad
- fa-flag
등

my-icon 클래스는 더해진다

스타일 시트

.my-icon {
    font-size: 32px;
    color: orange;
}

결과 이렇게

아이콘 크기 조정

fa-xs

fs-sm

fa-lg

fa-2x ... 10x

<body>
    <i class="far fa-flag my-icon fa-xs"></i>
    <i class="far fa-flag my-icon fa-sm"></i>
    <i class="far fa-flag my-icon fa-lg"></i>
    <i class="far fa-flag my-icon fa-5x"></i>
</body>

목록에 아이콘 사용

fa-fw 폭을 모은다.

<body>
    <div><i class="fas fa-home fa-fw"></i>Home</div>
    <div><i class="fas fa-info fa-fw" ></i>about</div>
    <div><i class="fas  fa-question fa-fw"></i>help</div>

    <ul class="fa-ul">
        <li><span class="fa-li"></span><i class="fas fa-home fa-fw"></i></span>Home</li>
        <li><span class="fa-li"></span><i class="fas fa-info fa-fw" ></i></span>about</li>
        <li><span class="fa-li"></span><i class="fas fa-question fa-fw"></i></span>help</li>
    </ul>

</body>

회전 로딩 아이콘 거의 copipe

<body>
    <i class="fas fa-spinner fa-spin fa-3x"></i>
    <i class="fas fa-spinner fa-pulse fa-3x"></i>
</body>

이하 FontAwesome5와 6에서 사양이 다른 것 같기 때문에 할애.

Reference

이 문제에 관하여(FontAwesome), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/matasaburou09/items/45a8d5dadd1fcfc3049b

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다