티스토리 뷰
목차
이 포스팅의 목적은 fontAwesome이
설정에 따라 출력이 안 되는 걸 발견해서이지만,
나는 언제나 포스팅을 이 정보를 처음 접하는 사람이 본다 생각하고 쓰니
fontAwesome을 설명하고 나서 쓰겠다.
FontAwesome
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
이 사이트를 웹페이지를 만들면서 사용하지 않는 경우는 googlefont보다 적지 않을까
googlefont는 폰트마다 지원되는 언어가 제한되어 있어, 그 언어 국가의 폰트 사이트를 찾는 경우가 있다.
Like a
상업적 이용 가능한 무료 한글 폰트 모음 사이트 눈누
상업적으로 이용할 수 있는 무료 한글 폰트를 모아 놓은 사이트 눈누
noonnu.cc
그러나 icon은 그림으로써 전 세계에 통용됨으로써 가용성은 더 넓다 할 수 있다.
웹사이트 만들면서 아이콘을 안 쓰는 사이트를 찾기는 힘들 터이니
세팅하기
FontAwesome를 사용하려면 데이터를 가져올 링크를 받아야 하는데
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
링크에 들어가서
Start for Free를 누른 다음
여기에 자신의 이메일 주소를 적어 이메일을 통하여 CDN주소를 받아 사용하는 방법이 정석인데,
주소를 까먹을 때도 많고 (프로젝트 새로 만들 때마다 찾기도 귀찮고...) 하니
그때그때 간단하게 한방 법으로 얻자면
font-awesome - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
The iconic SVG, font, and CSS toolkit - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 11% of all websites, powered by Cloudflare. We make it faster and easier to load library files on yo
cdnjs.com
여기서
버전(Version) 선택하고 import 할 타입을 고르면 된다.
styling(html) 일 경우가 많을 테니 쓸 테니 styling을 예로 들고,
목록에 뜨는 많은 링크들은
Font Awesome을 보면 하나의 폰트가 여러 가지 스타일을 가지고 있는데
끝에 solid.min.css를 포함한 링크는 solid만을 가져온다.
하지만 아이콘이 무료인 스타일은 조금씩 다르니 제일 위의 all 링크를 사용하자.
위의 </>를 누르면 tag형식으로 클립보드에 복사되고,
이렇게 복사하면 된다.
그다음 FontAwesome에서 사용할 아이콘을 찾아 들어간다음
동그라미 친 태그를 클릭하면 태그 형식으로 클립보드에 복사된다.
이를 html 코드 안에 넣어주면 된다.
<body>
<i class="fas fa-chevron-right"></i>
</body>
폰트가 안나오는 이유
자 오늘 포스팅의 목적이었던
font style설정에 따라 링크가 안 되는 경우!!
fontAwesome에서 잘 쓰다가 갑자기 안될 때는
<body>
<i class="fas fa-chevron-right" style="font-weight: 500;"></i>
</body>style에서 font-weight를 만져서 그럴 때가 있다.
font-weight에 따라 위에 설명했던
solid regular light를 왔다 갔다 하는 것 같다.
즉 pro를 구매하였다면 문제없겠지만
pro를 사용하지 않는 CDN을 사용 중이라면 pro영역 스타일의 아이콘을 불러올 수 없는 것.
끝
'웹개발(프론트)' 카테고리의 다른 글
| Visual Code 자동완성 만들기, User Snippets (0) | 2021.02.16 |
|---|---|
| Visual Code 자동저장 하기 (0) | 2021.02.15 |
| html 그리기 Svg / Canvas (0) | 2021.02.13 |
| html 줄 긋기 (0) | 2021.02.12 |
| 영역에 배경 / 그라데이션 넣는법 (0) | 2021.02.11 |
- Total
- Today
- Yesterday
- 에러
- dom
- 접근성
- Hook
- 랜더링
- proptype
- react
- homebrew
- 무료아이콘
- SVG
- Redux
- 아이콘
- touchable
- switch
- 클릭
- 웹접근성
- visualcode
- usecookies
- nodejs
- async
- 쿠키
- 서버
- html
- Expo
- 가상샐렉터
- useReducer
- 비동기
- Router
- 이쁜코드
- CSS
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 |