이 글에서 이미지 아이콘이 아닌 이 블로그에서 사용하는 아래와 같은 폰트 아이콘 사용에 대해서 적으려고 한다. 폰트 아이콘 사용에 대해서 2018/11/22 - 부트스트랩 3과 4에서 아이콘 사용에서 약간 적은 적이 있으니 참고했으면 한다. 폰트 아이콘을 사용하면 무료(free)로 1,409개, 유료(pro)로 4,566개 벡터 아이콘을 사용할 수 있다. 참고로 폰트 아이콘은 <head> 태그에 코드를 넣을 수 있으면 된다. 네이버 블로그는 불가능하니 고생 말았으면 한다.
이 페이지만이 아닌 이 블로그에 거의 모든 아이콘은 이미지 아이콘이 아닌 폰트 아이콘이다. 만약 폰트 아이콘을 제공하는 곳이 한국이라면 카카오톡, 카카오스토리, 밴드 등으로 공유하는 아이콘도 폰트 아이콘을 사용했을 것이다. 하지만 그곳을 보니 브랜드에 인 라인 아이콘만 있었다. 그래서 현재는 이미지 아이콘을 사용 중이다. 현재 폰트 아이콘 서비스에서 제공하는 브랜드 아이콘이 390개 있다. 그중에서 삼성, LG, 현대자동차 등의 브랜드는 없었다.
스킨이나 글에서 아이콘을 사용하기 위해서 HTML 코드를 얻어야 한다. 아이콘을 클릭한 후 위 그림 2번을 클릭하여 그 아이콘에 대한 HTML 코드가 복사된다. 스킨이나 글에 그 HTML 코드를 쓰면 아이콘이 나타나게 된다. 예로 사과 아이콘을 나타내기 위해 사과 아이콘인 의 HTML 모드에서 HTML 코드를 아래 그림과 4번과 같이 써주면 된다.
아이콘의 크기, 회전, 애니메이션, 레이어 등은 3번 Docs를 보고서 아이콘에 레이어, 회전, 크기 등을 설정하여 나타낸 경우다. 참고로 아이콘은 항상 정적이지 않다.
'IT.인터넷.생활 관련 > 스크립트.HTML.CSS' 카테고리의 다른 글
| 유튜브로 동영상 배경 만들기 (0) | 2021.02.25 |
|---|---|
| CSS로 이미지 부드럽게 확대하기 (0) | 2020.07.03 |
| JSFiddle에서 CodePen으로 (0) | 2019.10.14 |
| 사진편집 전과 후를 나타나는 스크립트 적용 (0) | 2019.10.04 |
| 유튜브 동영상 배경에 나타내기 (0) | 2018.09.03 |
| 해결책은 jsfiddle 삽입이다. (0) | 2018.05.21 |
| jqeury 클래스추가 유용한 것 같다. (0) | 2017.09.15 |
| 동영상 배경으로 티스토리를 멋있게 (9) | 2016.05.27 |
