반응형
html icon 아이콘 적용하기
홈페이지를 제작하다보면 인포그라픽이나 포인트로 적용되는 아이콘들이 정말 많습니다. 일반적으로 워드프레스나 부트스트렙같이 유동적 반응형 홈페이지들은 이런 아이콘도 잘 만들어져 있어 쉽게 쉽게 적용할수 있지만 개발자로서는 한계가 있습니다. 그래서 퍼블리셔들이 설치하고 적용해가며 쓰는 실전 노하우를 알려 드릴까합니다.
FTP에 접속하여 될수 있으면 가장 최상위폴더에 적용하는 것이 좋습니다. 왜냐하면 적용하려는 CSS나 Source code(zip) 경로가 정해져 있기 때문입니다.
참고예제 > http://axicon.axisj.com
다운로드 하시고 나서 FTP에 설치가 끝나시면 예제를 보면서 아이콘을 클릭하시면 아래와 같이 소스에대한 네이밍이 나오면 그대로 복사하셔서 메뉴나 테이블에 적용하시면 됩니다.
참고로 적용이 안될경우가 있는데 그건 서버셋팅 할때 서버관리자가 icon 파일 설정허용을 안했거나 font파일명인 .otf를 설정을 안해주면 실행이 안되는 경우도 있으니 이경우를 참고하시기 바랍니다.
적용하기
1 | <i class="axi axi-json-boolean4"></i> |
1 | axi axi-json-boolean4 | -------------> 네이밍 글자복사하여 붙혀넣기 하면됩니다. |
AXIcon
http://axisj.com
Material Design Icons
https://github.com/google/material-design-icons
Meteocons
http://www.alessioatzeni.com/meteocons/
ionicons
http://ionicons.com/
Feather
http://colebemis.com/feather/
Font Awesome
http://fortawesome.github.io/Font-Awesome/
자주 활용하는 사람들은 아래와 같은 검색폼이 있으니 관련된 영문을 사용하면 쉽게 찾아서 적용할 수 있습니다.
※ 라이센스 참고
액시스제이는 기본적으로 LGPL 라이선스를 따릅니다. 그렇게 때문에 영리적인 목적으로 사용해도 상관없고 추가 및 개선을 하셔도 무방합니다.
단 액시스제이가 제공하는 소스를 수정하는 경우는 동일하게 공개하셔야 되는 의무가 있을 뿐입니다.
액시콘은 기본적으로 LGPL 라이선스를 따릅니다. 그렇게 때문에 영리적인 목적으로 사용해도 상관없고 추가 및 개선을 하셔도 무방합니다.
단 액시콘이 제공하는 형태를 소스를 수정하는 경우는 동일하게 공개하셔야 되는 의무가 있을 뿐입니다.
자세한 사항은 아래의 파트별 라이선스를 참조해주세요
글꼴 라이선스
다음 디렉토리에있는 모든 데스크톱 및 webfont 파일에 적용 axicon/fonts/
액시콘은 다음의 아이콘 파일 파일을 조합하여 재 배포 하고 있습니다. 각각의 아이콘 파일들은 다음의 라이선스를 가지고 있습니다.
* Axisj
라이센스 : SIL OFL 1.1
http://axisj.com/axicon
* Meteocons
라이센스 : custom
http://www.alessioatzeni.com/meteocons/
* Feather
라이센스 : MIT
URL : http://colebemis.com/feather/
* ionicons
라이센스 : MIT
URL : http://ionicons.com/
* Font Awesome
라이센스 : SIL OFL 1.1
http://fortawesome.github.io/Font-Awesome/
코드 라이선스
다음 디렉토리에있는 모든 CSS 적은 파일에 적용 axicon/css/ , axicon/less/
라이센스 : MIT 라이선스
URL : http://opensource.org/licenses/mit-license.html
문서 사용 허가서
글꼴 또는 코드 라이센스에 포함되지 않은 모든 액시콘 프로젝트 파일에 적용됩니다
라이센스 : 3.0 CC
URL : http://creativecommons.org/licenses/by/3.0/
브랜드 아이콘
모든 브랜드 아이콘은 해당 소유자의 상표입니다.
이 상표의 사용은 그 반대의 액시콘에 의해 상표의 승인을 받았다는 것을 의미하지는 않습니다.
- [홈페이지만들기/워드프레스] - Garfunkel (블로그 테마) 무료 워드프레스 테마
- [홈페이지만들기/Html_css&css3] - html 주석(comment)
- [홈페이지만들기/Html_css&css3] - CSS 글꼴 Font 속성
- [홈페이지만들기/Javascript 자바스크립트] - Javascript 자바스크립트 및 프론트엔드 Front-end web programming 웹 개발
- [홈페이지만들기] - 무료호스팅 리스트
- [홈페이지만들기/Html_css&css3] - Html5 표현태그 텍스트서식태그
- [홈페이지만들기/Html_css&css3] - CSS a href 링크 / div 링크 100% 버튼
- [홈페이지만들기/Html_css&css3] - 인포그래픽 아이콘사용방법
반응형
'홈페이지만들기 > Html_css&css3' 카테고리의 다른 글
| css 그라데이션 표현과 응용 css background (2) | 2017.11.23 |
|---|---|
| CSS 배경(컬러) color 및 image(이미지) 기울이기 (0) | 2017.11.03 |
| html 주석(comment) (0) | 2017.10.11 |
| CSS 글꼴 Font 속성 (0) | 2017.09.27 |
| Html5 표현태그 텍스트서식태그 (0) | 2017.07.12 |
