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="//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, ๋ฌธ์๋ฅผ ๊ทธ๋ฆฌ๋ค
XEICon์ ์น์ฌ์ดํธ ์ ์์ ์ต์ ํ๋ ๋ฒกํฐ ๊ทธ๋ํฝ ์์ด์ฝ ํดํท์ ๋๋ค. ์ฌ๋ฌ๋ถ์ ์๋ฆ๋ต๊ณ ์ง๊ด์ ์ธ ์นํ์ด์ง ์ ์์ ๋์ต๋๋ค.
xpressengine.github.io
'CSS๐ง > css ์์ด์ฝ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
html/css <i>ํ๊ทธ๋ก ์์ด์ฝ ํฌ์ธํธ์ฃผ๊ธฐ (0) | 2022.10.10 |
---|---|
html ํ๋น์ฝ ๋ธ๋ผ์ฐ์ ํญ ์์ด์ฝ ์ ์ฉ (Favicon) (0) | 2022.10.06 |
css ๋ฐฐ๊ฒฝ์์ด์ฝ sprite ์ด๋ฏธ์ง๋ก ์ ์ฉํ๊ธฐ (0) | 2022.10.05 |
xe ์์ด์ฝ ์ ์ฉํ๊ธฐ (0) | 2022.09.05 |
๋๊ธ