HTML CSS 【Font Awesome】을 사용해 본다
6803 단어 HTMLCSS초보자FontAwesome
[참고 사이트]h tps : // 우 ぇ b로 해 g ン-t 벽돌 ds. 네 t/엔 try/8351
Font Awesome을 HTML과 CSS로로드하는 방법으로 시도했습니다.
① <head> 태그 안에 넣는다
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Font Awesomeを使ってみる</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
</head>
</html>
https://use.fontawesome.com/releases/v5.6.3/css/all.css"＞を＜head＞内に入れる
② 사용할 아이콘을 선택합니다.
[아이콘 찾기] htps : ///후타타우우소메. 코 m/이콘 s? d = 굿 ry
링크처에서 사용하고 싶은 아이콘을 찾는다(당연히 영어로!)
[일본어로 입력하면 검색하는 사이트] ㅡㅡㅡㅜㅜㅜㅜㅜㅜㅜㅜㅜ 코m/
③ 아이콘 표시
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Font Awesomeを使ってみる</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
</head>
<div class="icon-test">
<i class="fab fa-facebook-square" style="color:#305097;"></i>
</div>
</html>
styles.css
.fab fa-facebook-square::before {
content:'\f082';
font-family:'Font Awesome 5 Free';
font-weight:900;
}
content에 아이콘의 Unicode(유니코드)를 copipe 머리에\(슬래시)를 잊지 않고!
브라우저에서
이렇게 표시되었습니다.
그럼 색과 사이즈를 바꿔 봅시다.
④색을 바꾼다
index.html
<div class="icon-test">
<i class="fab fa-facebook-square" style="color:#305097;></i>
</div>
color 속성을 지정하여 색상을 변경할 수 있습니다.
색이 바뀌었습니다.
⑤ 사이즈 변경
index.html
<div class="icon-test">
<i class="fab fa-facebook-square fa-xs" style="color:#305097;"></i>
<i class="fab fa-facebook-square fa-sm" style="color:#305097;"></i>
<i class="fab fa-facebook-square fa-lg" style="color:#305097;"></i>
<i class="fab fa-facebook-square fa-5x" style="color:#305097;"></i>
<i class="fab fa-facebook-square fa-10x" style="color:#305097;"></i>
</div>
class명에 사이즈를 더하는 것으로 변경할 수 있습니다.
Reference
이 문제에 관하여(HTML CSS 【Font Awesome】을 사용해 본다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/a-takano/items/3a1b58116998fdaa94c7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
