Cuộc sống Nhật Bản
Yuto Blog

Ruby on Rails アプリにVuetifyとFontAwesomeの導入

Nội dung chính

Vuetify導入

Copy
1
yarn add vuetify @fortawesome/fontawesome-free
Copy app/javascript/packs/plugins/vuetify.js
1
2
3
4
5
6
7
8
9
10
11
import Vue from 'vue'
import Vuetify from 'vuetify'
import "vuetify/dist/vuetify.min.css"
import '@fortawesome/fontawesome-free/css/all.css'

Vue.use(Vuetify)
export default new Vuetify({
  icons: {
    iconfont: 'fa',
  }
})
Copy app/javascript/packs/main.js
1
2
3
4
5
6
7
8
9
import vuetify from './plugins/vuetify'

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    vuetify,
    render: h => h(App)
  }).$mount()
  document.body.appendChild(app.$el)
})

使用例

Copy html
1
<v-icon>fas fa-home</v-icon>

FontAwesome導入

Copy
1
yarn add @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome
Copy app/javascript/packs/main.js
1
2
3
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
Vue.config.productionTip = false
Vue.component('FontAwesomeIcon', FontAwesomeIcon)

使用例

Copy html
1
2
3
<FontAwesomeIcon icon="user"/>
<FontAwesomeIcon :icon="['far', 'star']"/>
<FontAwesomeIcon :icon="['fab', 'facebook']"/>
Updated at 2023-05-09
Nếu bài viết có ích thì các bạn hãy chia sẻ nhé
Rate this article: 4.9/5 (48 ratings)
You didn't rate yet
Le Minh Thien Toan

Tác giả:Yuto Yasunaga

Xin chào các bạn. Mình là kỹ sư IT đang làm việc ở Nhật Bản. Mình tạo blog này để chia sẻ về cuộc sống và những kinh nghiệm trong quá trình học tập và làm việc.
Hy vọng bài viết này sẽ có ích cho bạn.