CSS

fontello

딩벳폰트는 폰트 대신 어떤 문자에 해당하는 이미지로 이루어진 폰트를 의미합니다. fontello는 딩벳이나 아이콘을 폰트로 제공하는 여러 서비스를 모아둔 서비스입니다. 특히 SVG 파일을 업로드하면 폰트로 만들어주기도 합니다. 

fontello.com

여기서는 폰트텔로를 이용해서 아이콘을 웹페이지에 삽입하는 방법을 알아봅니다. 

소개

사용법

원리 

폰트 만들기 & 유지보수

댓글

댓글 본문
작성자
비밀번호
  1. 묘로리
    너~무유용하다 ㅠ ㅠ
  2. 삐꾸돼지
    2017.2.1 CSS 1번 완주 하였습니다. 좋은 강의 만들어주셔서 감사합니다^^.
    2회 3회 ,,, 10회 까지 개속 공부하면서 열심히하겠습니다
  3. 곧프로그래머
    코드를 똑같이 쳐도 폰트가 안나오고 계속 네모만 뜨는건 왜 그러는건가요.... 답답ㅠㅠ...
  4. cancaodosang
    아이콘을 구글cdn을 이용해서 웹페이지에 삽입시켜 사용했었어어요.
    그런데 어느날 갑자기 아이콘이 한쪽 구석에서 멈춰서 작동을 안하는거예에요.
    왜 일까 하고 살펴보던 중, 구글cdn안에 hide라는 속성이 원치 않게 삽입되어 있었어어요.
    hide라는 단어를 지우고 싶었지만, 지워지도 않고, 그 홈버튼 아이콘 하나때문에, 웹페이지가
    엉망으로 엉켜서 뒤죽박죽이 되어 버렸습니다.

    내가 원하는 건, 내가 만든 간단한 아이콘 한개를,한쪽 구석에 배치하는 거였는데,
    그 아이콘 한개를 사용하기 위해, fontello라는 이 화려한 기능을 사용해야 하는 것일까!
    하는 생각을 합니다. 1억개의 아이콘을 무료로, 무한대로 사용할 수 있는데,
    난 내 웹페이지에 한개의 아이콘을 삽입하지 못해서, 발 동동 구르는 기분이랄까요!
  5. 폭스킴
    중간에 슬럼프가 좀 있었지만 간신히 완주했네요~ 너무나 감사드립니다. ^^

    그리고 질문 하나 드려요~

    fontello에서 이용한 폰트는 라이센스가 어떻게 되나요? (thenounproject도요~)

    무료로 자유롭게 사용할 수 있는 건가요?
  6. 임지호
    fontello : 아이콘을 폰트의 형태로 바꿔서 사용할 수 있게 하는 기술
    - 사용법 : <i class="해당 폰트 이름"></i>

    16.12.24 css수업 끝!!
  7. 감사합니다:)
  8. 지선
    끝까지좋은강의감사합니다~!
  9. 시간이 너무없어서 css 실습을 못하고 완주했네요.. ㅠ 나중에 한번 더 보러와야겠어요 제일 좋았던 파트는 flex 와 mediaquery였습니다. 좋은강의 감사합니다.
  10. sSll바버미니llSs
    강의 완주했습니다. 감사합니다!!
  11. 개발하는윰주
    친절하고 세세한 강의 감사드립니다! 너무 좋은 강의였어요!
  12. 호걸노바
    좋은 강의 잘 들었습니다. 감사합니다.
  13. 박중신
    CSS 강의도 완주했습니다. 감사합니다 :)
  14. Chizcake
    좋은 강의 만들어주셔서 감사합니다 :)
    덕분에 CSS에 대한 막연한 두려움에서 조금이나마 벗어날 수 있게 되었어요.

    앞으로도 좋은 강의 많이 만들어주세요!
  15. 박정호
    감사해요
  16. 생활코딩회원중의 한 명입니다.
    좋은 강의 감사드립니다. 꾸벅~
  17. 갤럭시
    감사합니다~
  18. happychallenge
    감사합니다. 사랑합니다. 이렇게 좋은 강의를 무료로 해 주셔서 감사합니다.
    작지만 저도 후원을 하겠습니다.
  19. 마엘
    정말 잘 들었습니다. 언제나 감사합니다!!
  20. 감사해요
    진짜 잘 들었습니다.
    유튭 채널에서 들어서 사이트에 댓글은 처음 달아요.
    좋은 자료 감사합니다.
    제가 드리는 무한한 감사를 받으세요!!
  21. 코딩신
    CSS강의 정말 잘 들었습니다!

    감사합니다
  22. Wj Kim
    훌륭한 강의 잘 들었습니다. 감사합니다. (_._)
  23. 다은아빠
    좋은 강의 잘 들었습니다.
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기