css XEIcon 추가

css에 xeicon 넣어주기

---

 

1. xeicon의 get started 에서 링크 겟겟

 

 

 

 

html head에 폰트아래 코드 붙여넣기

  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;400;500;700&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">

 

 

---

주의

 

 <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">

http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css

 

XEICON 링크 앞에 http: 넣기

 

---

2. 아이콘찾기

 

 

 

---

3. i 태그에 아이콘 이름 html clss 로 지정 

 

 

html 적용

<p class="warning"><i class="xi-error"></i>상기 요금은 부가세가 포함되어 있는 가격입니다.</p>

 

 

css 적용

.fee_area .fee_wrap .warning i {

    margin-right: 5px;

    font-size: 18px;

}

 

 

---

4.vertical-align 적용

 

 

 

    inline 요소라 간격이 벌어지므로    vertical-align: -3px;

 

 

 

---

 

 

하단링크참조

 

 

http://xpressengine.github.io/XEIcon/started.html

XEIcon, 문자를 그리다