웹 아이콘 사이트
2023-08-03
fontawesome 은 뭔가 복잡해 보이고, 부트스트랩, Feather 두 가지가 조금 간편해 보이긴 합니다. 실제로 사용은 안해보긴 했는데, 이 3개 중에서 고려를 하면 될 것으로 생각이 됩니다.
부트스트랩 아이콘
설치
npm i bootstrap-icons
사용
<i class="bi bi-0-circle"></i>
html
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-0-circle" viewBox="0 0 16 16">
<path d="M7.988 12.158c-1.851 0-2.941-1.57-2.941-3.99V7.84c0-2.408 1.101-3.996 2.965-3.996 1.857 0 2.935 1.57 2.935 3.996v.328c0 2.408-1.101 3.99-2.959 3.99ZM8 4.951c-1.008 0-1.629 1.09-1.629 2.895v.31c0 1.81.627 2.895 1.629 2.895s1.623-1.09 1.623-2.895v-.31c0-1.8-.621-2.895-1.623-2.895Z"/>
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8Z"/>
</svg>
Octions
React, Rails 만 지원하는 듯 합니다.
fontawesome
core
npm i --save @fortawesome/fontawesome-svg-core
packages
# Free icons styles
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons
vue3
npm i --save @fortawesome/vue-fontawesome@latest-3
vue3 setup
/* Set up using Vue 3 */
import { createApp } from 'vue'
import App from './App.vue'
/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'
/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
/* import specific icons */
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
/* add icons to the library */
library.add(faUserSecret)
createApp(App)
.component('font-awesome-icon', FontAwesomeIcon)
.mount('#app')
사용
/* add fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'
/* add some free styles */
import { faTwitter } from '@fortawesome/free-brands-svg-icons'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
/* add some pro styles */
import { faBicycle } from '@fortawesome/pro-regular-svg-icons'
import { faEnvelope } from '@fortawesome/pro-light-svg-icons'
import { faFeather } from '@fortawesome/pro-thin-svg-icons'
import { faHorseSaddle } from '@fortawesome/pro-duotone-svg-icons'
import { faAlien } from '@fortawesome/sharp-solid-svg-icons'
import { faPlateUtensils } from '@fortawesome/sharp-regular-svg-icons'
/* add each imported icon to the library */
library.add(faTwitter, faUserSceret, faBicycle, faCoffee, faFeather, faHorseSaddle, faAlien)
<!-- Add Icons using String format -->
<font-awesome-icon icon="fa-brands fa-twitter" />
<font-awesome-icon icon="fa-solid fa-user-secret" />
<font-awesome-icon icon="fa-regular fa-bicycle" />
<font-awesome-icon icon="fa-light fa-envelope" />
<font-awesome-icon icon="fa-thin fa-feather" />
<font-awesome-icon icon="fa-duotone fa-horse-saddle" />
<font-awesome-icon icon="fa-sharp fa-solid fa-alien" />
<font-awesome-icon icon="fa-sharp fa-regular fa-plate-utensils" />
또는
<!-- Add Icons using Array format -->
<font-awesome-icon :icon="['fab', 'twitter']" />
<font-awesome-icon :icon="['fas', 'user-secret']" />
<font-awesome-icon :icon="['far', 'bicycle']" />
<font-awesome-icon :icon="['fal', 'envelope']" />
<font-awesome-icon :icon="['fat', 'feather']" />
<font-awesome-icon :icon="['fad', 'horse-saddle']" />
<font-awesome-icon :icon="['fass', 'alien']" />
<font-awesome-icon :icon="['fasr', 'plate-utensils']" />
Feather
설치
npm install feather-icons --save
include
<script src="path/to/dist/feather.js"></script>
사용
<i data-feather="circle"></i>
icofont
<link rel="stylesheet" href="myProjects/webProject/icofont/css/icofont.min.css">