[SIST] Web_CSS_days02_CSS 아이콘 사용

2022. 5. 23. 00:00·TIL/Web(HTML, CSS, JS, jQuery)
728x90
반응형

1. 아이콘 라이브러리 사용(가장 간단한 방법) - ex) fontawesome

https://fontawesome.com/icons

 

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

 

2. 구글 아이콘 사용

 

3. 부트스트랩 아이콘 사용

 

등등

 

> 위의 3가지 방법을 사용하기 위해서는 아래 각각의 script나 link 코드를 추가해야한다.

> fontawesome은 회원가입 후 자신의 코드를 넣어야 한다.

<!-- fontawesome -->
<script
  src="https://kit.fontawesome.com/자신의코드.js"
  crossorigin="anonymous"
></script>

<!-- google -->
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>

<!-- 부트스트랩 -->
<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
/>

 

 

728x90
반응형

'TIL > Web(HTML, CSS, JS, jQuery)' 카테고리의 다른 글

[SIST] Web_CSS_days03_반응형 테이블  (0) 2022.05.23
[SIST] Web_CSS_days03_link 태그와 동적 셀렉터  (0) 2022.05.23
[SIST] Web_CSS_days02/days06_CSS 글꼴 설정 및 Google 글꼴 사용하기 / CSS 웹 글꼴(22.05.26 내용 추가)  (0) 2022.05.22
[SIST] Web_CSS_days02/days06_CSS 텍스트(text) 관련 서식(색상, 정렬, 방향, 장식, 변환, 간격, 그림자) / 텍스트 효과(text-overflow와 writing-mode) / 박스 그림자 효과(box-shadow) (22.05.26 내용추가)  (0) 2022.05.22
[SIST] Web_CSS_days02_box model / 윤곽선(outline)  (0) 2022.05.22
'TIL/Web(HTML, CSS, JS, jQuery)' 카테고리의 다른 글
  • [SIST] Web_CSS_days03_반응형 테이블
  • [SIST] Web_CSS_days03_link 태그와 동적 셀렉터
  • [SIST] Web_CSS_days02/days06_CSS 글꼴 설정 및 Google 글꼴 사용하기 / CSS 웹 글꼴(22.05.26 내용 추가)
  • [SIST] Web_CSS_days02/days06_CSS 텍스트(text) 관련 서식(색상, 정렬, 방향, 장식, 변환, 간격, 그림자) / 텍스트 효과(text-overflow와 writing-mode) / 박스 그림자 효과(box-shadow) (22.05.26 내용추가)
야리니
야리니
오늘보다 내일 더 성장하는 개발자가 되기 위한 야리니 블로그입니다 :)
    반응형
    250x250
  • 야리니
    야리니의 step by step
    야리니
  • 링크

    • GitHub
    • Linkedin
  • 전체
    오늘
    어제
    • 분류 전체보기 (477)
      • TIL (379)
        • Java (97)
        • Kotlin (28)
        • JPA (16)
        • Spring (37)
        • Oracle (22)
        • JDBC (7)
        • Web(HTML, CSS, JS, jQuery) (90)
        • View Template (31)
        • AWS (7)
        • HTTP (7)
        • CS (5)
        • Linux, Unix (2)
        • Python (20)
      • Trouble Shooting(Error) (37)
      • Algorithm (15)
      • Git,GitHub (8)
      • Diary (23)
      • 독서 (9)
      • Etc (6)
        • Mac (1)
        • 학원준비과정 (2)
  • 블로그 메뉴

    • 방명록
    • 태그
  • 공지사항

    • 안녕하세요 :)
  • 인기 글

  • 태그

    Kotlin
    HTML
    쌍용교육센터
    코틀린
    java
    국비지원학원
    CSS
    oracle
    백엔드 개발자
    java기초
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.2
야리니
[SIST] Web_CSS_days02_CSS 아이콘 사용
상단으로

티스토리툴바