CSS

fontello

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

fontello.com

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

소개

사용법

원리 

폰트 만들기 & 유지보수

댓글

댓글 본문
  1. DreamBoy
    2023.09.25. CSS - libary - fontello 파트 수강했습니다.
  2. 드림보이
    2021.11.23. fontello 파트 수강완료
  3. choi
    완료
  4. jeisyoon
    2021.06.25 Fontello - OK
  5. 따뜻한츄르
    210101
  6. Bless
    제 최초의 웹에 커피잔 모양 하나 넣고싶어서 봤는데 아이콘 하나 넣는데 기술 겁나 많이 들어가있네요 ㅎㅎ
    그래도 아이콘 넣기 성공해써요 fontello!!
  7. 감사합니다
  8. 박병진
    감사합니다.
  9. 전유진
    2번짹 강의때
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/fontello.css">
    <style>
    body{
    font-family: "fontello";
    }
    </style>
    </head>
    했는데 안되는 이유는 무엇인가요??
  10. 한강
    fontello library 잘 배웠습니다~~^^!
    200617
  11. green diseny
    이거 그냥 집가서 하삼 브라켓츠 깔아서 하삼 개빡침 왜안돼는지 모르겠는데
  12. Blanc
    2020.01.07
  13. hsak0601
    재미있는기능이네요 ^3^
  14. 공부중
    너무 귀여운 기능이네요
  15. 류석현
    수강완료! 전 한번만더 정주행하고 JS 넘어가야겠네요 ㅠ 다들 힘내세요!
  16. 박지성
    폰테요 선수는 감아차기가 장점이라 생각하기 때문에
  17. lygon
    2019-03-13 완료
  18. 김민영
    완료
  19. 스페이스몽키
    감사합니다. 점점 끝이 보이네요!
  20. 멜번리디아
    감사합니다.
  21. 박신우
    감사합니다
  22. 푸른하늘
    12일차 공부 감사합니다
  23. Joohyun Song
    아 저도 완주했습니다. HTML 에 이어 CSS 까지..
    이제 JS 로 넘어갑니다.
    감사합니다.
  24. protester
    아...드뎌 완주했어요~! 감사합니다!
  25. nevertoolate
    감사합니다. JS 강의 듣고 나서 다시 CSS 복습하러 올께요.
  26. 잉여로운코더
    감사합니다 덕분에 좋은 내용 잘 듣고 갑니다.
  27. Je-Hyeong Kim
    감사합니다!
  28. 세븐나이츠
    css 강의 아주 잘 들엇습니다
  29. 어린왕자
    CSS 강의 잘 들었습니다.
    자세한 설명 감사합니다.
  30. 0529 완료했어요 :)
  31. 아리시마
    17.5.13 CSS 한번 다봤습니다 ㅎㅎ..
    좋은 강의네요 ..

    새로운 기능 많이 알아갑니다.

    홈페이지 제작하고 있는데 한번 잘 활용해보고 모르면 다시 복습해볼깨요 !
  32. php가 첫취업?
    알아두면 좋은 과목이었네요...일단...초보자가 듣기에는 안들어도 된다고 하신거 제외하고..
    나머지를 이해하는 작업을 할까합니다..
  33. php가 첫취업?
    드디어 1회 완주했습니다...html php와는 다르게 알아둬야할 부수적인 기능들이 너무 많아 보여서 힘드네요....
    1회 완주 배속으로 일단 들엇으니..
    이제 이해 안가는 항목들만 순서대로...보통 속도로 다시 재시작할까합니다
  34. 고베베
    와~ 드디어 1회 완주했네요.
    정말 많은 도움 받고 갑니다.

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

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

    그리고 질문 하나 드려요~

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

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

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

    앞으로도 좋은 강의 많이 만들어주세요!
  49. 박정호
    감사해요
  50. 생활코딩회원중의 한 명입니다.
    좋은 강의 감사드립니다. 꾸벅~