λ¬΄λ£ μμ΄μ½ ν°νΈ μ¬μ΄νΈλ₯Ό μκ°ν΄λ립λλ€. κ°μΈμ΄λ μμ μ© λ¬΄λ£ μμ΄μ½μΌλ‘ μ¬μ©ν μ μλ μ¬μ΄νΈλ μμ΄μ μ λ μ¬κΈ°μμ λ¬΄λ£ μμ΄μ½μ λ€μ΄λ‘λν΄μ νμ¬ ννμ΄μ§μ μ¬μ©νκ³ μμ΅λλ€. μ μλ μΌλ¬μ€νΈμμ μ§μ ν°νΈλ₯Ό κ·Έλ €μ pngλ‘ μ μ₯ν΄μ μ°κ±°λ svgλ‘ μ μ₯ν΄μ μΌλλ°μ. μ§κΈμ κ·Έλ₯ λ¬΄λ£ μμ΄μ½ μ¬μ΄νΈμμ κ°μ Έμ΅λλ€. κΉ¨μ§μ§ μλ μμ΄μ½μΌλ‘ svgλ₯Ό μ£Όλ‘ μ΄μ©ν©λλ€. μ κ° μ΄μ©νλ λ¬΄λ£ μμ΄μ½ μ¬μ΄νΈμ λλ€.
1. ν°νΈ μ΄μΈ(font awesome)
κ°μ₯ λ§μ΄ μκ³ κ³μ€κ±°μμ.
κ°μ₯ νμ©λκ° λμ ν°νΈμμ΄μ½ μ¬μ΄νΈμ£ .
νμμμλ μ΄ μμ΄μ½ μ¬μ΄νΈλ λΉΌλμ§ μκ³ μκ°ν κ±°μμ.
무λ£μ μ λ£λ‘ λλ μ Έμμ΅λλ€.
2. μ΄μ¨ μμ΄μ½ λ¬΄λ£ ν°νΈ μμ΄μ½ - iconicons
μμ΄μ½μ svg νμμ΄μμ.
cdnμ μ΄μ©ν΄μ£ΌμΈμ.
ν°νΈ μμ΄μ½ Outline, Filled, Sharp μ΄λ κ² 3κ°μ§ μμ΄μ½ ν°νΈλ₯Ό μ νν μ μμ΄μ.
3. λ¦¬λ―Ήμ€ μμ΄μ½ - remixicon
pngνμκ³Ό svgνμμ λ€μ΄λ‘λν μ μκ³ , svgλ₯Ό CDNμΌλ‘ λ§ν¬ν΄μ μ¬μ©ν μ μμ΄μ.
μμ΄μ½ μμ²΄κ° κΉλνκ² μκ²Όμ΄μ.
μνλ μκΉκ³Ό ν°νΈ μ¬μ΄μ¦λ₯Ό μ€μ ν μ μμ΄μ svgμμ€μμ μμ ν μΌ μμ΄μ νΈν΄μ.
4. κ΅¬κΈ ν°νΈ μμ΄μ½
λ§μ΄λ€ μκ³ κ³μμ£ ^^
κ΅¬κΈ μμ΄μ½ ν°νΈλ νμ©λκ° λμ΅λλ€.
μ무λλ μ¬λ¬κ°μ§λ‘ ν°νΈ μμ΄μ½μ λ³κ²½ν μ μκΈ°λλ¬Έμ΄μμ.
μμ΄μ½κ³Ό λ‘κ³ κ° λ°λ‘ λΆλ¦¬λμ΄ μμ΄μ μ½κ² μ°Ύμλ³Ό μ μμ΄μ.
ν¬κΈ°λ ν°νΈ μ¬μ΄νΈ ν¬ν€μ»¬λ¬λ‘ μμ΄μ½μ΄ κ°λ₯νμ£ .
ν¬ν€μ»¬λ¬λ ν°μκ³Ό κ²μ μλ§ κ°λ₯ν΄μ μμ½μ§λ§ κ·Έλλ μ’μμ.
λμ± μ’μ μ μ μμ΄μ½ ν°νΈμ ν
λ리 μ¬μ΄μ¦μΈλ°μ,
μ΄κ² μ‘°μ μ΄ κ°λ₯ν΄μ.(μ€λ₯Έμͺ½ ν¨λμμ μ‘°μ κ°λ₯)
ν°νΈ μ΄μΈμμ ν¬ν€κ³Ό ν
λ리 μμ μμ΄μ½ ν°νΈλ μ λ£μΈλ° μ¬κΈ΄ 무λ£~
5. μμ€μ΄ μμ΄μ½ - XEicon
μ¬μ€ μ¬κΈ°λ μ²μ보λ 무λ£μμ΄μ½ μ¬μ΄νΈμμ.
XE보λ νμ¬μμ λ§λ€μλλ΄ λλ€.
Copyrightκ° naverλ‘ λμ΄ μλ€μ.
λ€λ₯Έ κ³³μ²λΌ cdnμ μ΄μ©ν μ μμ΄μ.
μ§μ λλμ κΉλν μμ΄μ½μ΄μμ.
λ€λ₯Έ κ³³λ³΄λ€ μμ΄μ½μ΄ ν¬κ² 보μ¬μ λμ΄ λ€ μμν΄μ.
6. λΆμ€νΈλ© μμ΄μ½
νλλ μΆκ°ν΄ λ³Όκ²μ.
λΆμ€νΈλ© μμ΄μ½μ
λλ€.
무λ£μ΄μ©μ
λλ€.
λ€μ΄λ‘λν΄μ μλ²μ λ£μ μλ μκ³ , μΉ λ§ν¬(CDN)λ ν μ μκ³ , SVGλ‘ λ€μ΄λ‘λ λ°μ μ μμ΄μ. κΌ Fontawesome κ°λ€μ.
λ©μΈνμ΄μ§μ μ»΄νμΌ cssμ js κ° μ μ€λͺ
λμ΄ μμ΅λλ€.
7. iconsvg - w3 μμ΄μ½
μ§κΈμ νΌλΈλ¦¬μ±μ΄ μ£Όμ
λ¬΄κ° μλμ§λ§, ν΄μΈ λλ£λ€μ΄ λ§λ€μ΄λμ μΉνμ΄μ§λ₯Ό μμ ν λκ° μμ΄μ.
λ§€λ² μ΄ μμ΄μ½μ΄ μ΄λκ²μΈμ§ λ¬Όμ΄λ³Έλ€νλ€κ° μ΄λ²μ μμλλ€μ.
μμ΄μ½ ν°νΈ λ§ν¬μ "https://www.w3.org/2000/svg" μ΄κ² μ°μ¬ μμ΄μ.
λ¬Όμ΄λ³΄λ "ICONSVG" μμ΄μ½ ν°νΈμ
λλ€.
μ¬κΈ°λ outlineκ³Ό λΈλλ λ‘κ³ λ₯Ό 무λ£λ‘ λ€μ΄λ‘λ λ°μ μ μμ΄μ.
ν°νΈ μμ΄μ½ μ¬μ΄μ¦μ μκΉ, μ λκ»λ₯Ό μ‘°μ ν μ μμ΄μ.
λ νλμ νΉμ§μ μ λ§μ§λ§ λΆλΆ μ²λ¦¬λ μ νν μ μμ΄μ μ’μμ.
μΌλ¬μ€νΈλ μ΄ν° μ μ²λ¦¬μ κ°λ€μ.
λ€λ§ μ¬κΈ°μμλ Tritone μμ΄μ½ 3κ°μ§ μμμ μμ΄μ½μ μ λ£μμ. $6.00νλ€μ.
8. icons8.com
νΌν¬λ§(figma) νλ¬κ·ΈμΈμΌλ‘λ μ°μ λλ€.
ν¨κ» 보면 μ’μ κΈ
'HTML&CSS' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
before after css κ°μμμ μ νμ (0) | 2021.11.19 |
---|---|
λ°μν λ°±κ·ΈλΌμ΄λ μ΄λ―Έμ§ λ§λ€κΈ° (0) | 2021.11.18 |
μ΄λ―Έμ§ 맡 λ§λ€κΈ°(μ΄λ―Έμ§ 맡 μ’νκ° μ½κ² μ°ΎκΈ°) (0) | 2021.06.16 |
μ νλΈ λμμ μλμ€ν μμ€ (0) | 2020.11.27 |
λͺ©λ‘ νκ·Έ <ul>, <ol>, <li> νκ·Έ (0) | 2020.10.31 |