- 인터넷은 우리에게 자유를 주었습니다. 저희는 자유를 얻기 위해 지식을 통합하고 체계화하고 공유합니다. 랜선 위 정글에서 살아남기 위해 저희는 시키는 일만 하는 꿀벌 대신 고객을 위해 창조하고 혁신하는 게릴라가 되겠습니다.
- 024042463
- 01032667931
- [email protected]
Font Awesome 폰트 아이콘(The iconic font and CSS toolkit, 워드프레스 꾸미기)
1. Font Awesome 개요( http://fontawesome.io/ )
유료 테마를 구입하여 사용하던 중 알게 된 기능인데, 국내에서도 이미 많은 분들이 사용하고 계십니다. 17.9.30 현재 675개의 무료 Icons을 제공합니다.
Font Awesome 을 이용하시면 아래의 노란색 네모칸안에 표시되는 아이콘을 표시하여 워드프레스로 사이트(홈페이지, 쇼핑몰), 블로그를 개성있게 꾸밀 수 있습니다.
Font Awesome은 크기, 색상, 그림자 및 기타 CSS 기능을 사용하여 수행 할 수있는 모든 작업을 즉시 사용자 지정할 수 있는 확장 가능한 벡터 아이콘을 제공합니다.
하나의 글꼴, 675 아이콘
단일 컬렉션에서 Font Awesome은 웹 관련 작업에 관련된 그림 문자 언어입니다.
자바 스크립트가 필요하지 않습니다.
Font Awesome에는 JavaScript가 필요 없어 호환성 문제가 줄어 듭니다.
무한 확장 성
확장 가능한 벡터 그래픽은 모든 아이콘이 어떤 크기로도 멋지게 보일 수 있음을 의미합니다.
무료, 음성으로
Font Awesome은 상업적 용도로 완전히 무료입니다. 라이센스를 확인하십시오 .
CSS 제어
아이콘 색상, 크기, 그림자 및 CSS로 가능한 모든 것을 쉽게 스타일 지정하십시오.
레티나 디스플레이에 적합
글꼴 굉장 아이콘은 벡터로, 고해상도 디스플레이에서 멋지다는 것을 의미합니다.
다른 사람들과 잘 어울린다.
원래 Bootstrap 용으로 고안된 Font Awesome은 모든 프레임 워크에서 훌륭하게 작동합니다.
데스크탑 친화적 인
바탕 화면이나 완벽한 벡터 세트를 사용하려면 치트 시트를 확인하십시오 .
접근하기 쉬운
Font Awesome 는 웹에서 아이콘에 액세스 할 수 있도록 도와줍니다 .
2. The iconic font and CSS toolkit download 받기
https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css 에서 download 받을 수 있습니다.
아이콘들은 http://fontawesome.io/icons/ 에서 조회하여 이용하실 수 있습니다.
3. 사용법
아래의 2개의 참고자료를 참조하시면 사용하시는데 유용할 것입니다.
[외모] -> [메뉴] -> [화면옵션]
-> [CSS클래스]를 click해주시면
-> [외모] -> [메뉴] 로 이동하시어 아무 메뉴나 선택하시면 CSS 클래스(옵션)이 활성화된 것을 확인하실 수 있습니다.
다른 전문가들이나 Font Awesome에서는 Font Awesome 를 다운로드하고 ftp로 자사(자신)의 서버로 업로드하고,<i> tag 를 사용하여 구현한다고 하며 이것이 정석인 것 같습니다.
저희의 경우에는 1개의 사이트는 이용하고자 하는 아이콘의 이름앞에 fa 만 붙여주어도 잘 되었습니다. (정확한 이유는 모르겠습니다.) 그러나 시간이 경과한후 다른 2개의 사이트에 시도해 보았는데 이곳에서는 fa를 붙이는 방식이 안돼 저도 실패하였습니다.
저희처럼 “fa (공란)”만 추가해서 안되시는 분들은 맨아래의 2개의 참조문서를 참조하세요.
1. 워드프레스 WordPress Font Awesome CSS 사용하여 인포그래픽 아이콘 삽입하기
2. Font Awesome 폰트 아이콘을 사용하여 워드프레스 블로그를 개성있게 꾸미기
Font Awesone 의 기술서가 필요하신 분들은 http://fontawesome.io/get-started/ 를 참조하시어 아이콘을 추가하고자하는 어느 곳에 <i> 태그를 아래와 같이 추가하세요.
<i class="fa fa-gift" aria-hidden="true"></i>
참고자료 : 1. 워드프레스 WordPress Font Awesome CSS 사용하여 인포그래픽 아이콘 삽입하기, 출처: http://mainia.tistory.com/3620 [녹두장군 – 상상을 현실로]
2. Font Awesome 폰트 아이콘을 사용하여 워드프레스 블로그를 개성있게 꾸미기
https://www.thewordcracker.com/basic/how-to-use-font-awesome-in-wordpress/
