サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール


サイドバー

目次

サルでもわかる機械学習

このページへのアクセス
今日: 1 / 昨日: 0
総計: 2

sidebar

00.vue用デザインフレームワークvuetify:06.vuetifyでアイコンを利用


文書の過去の版を表示しています。


06.vuetifyでアイコンを利用

リンク

https://vuetifyjs.com/ja/components/icons
v-iconコンポーネント
Vuetifyのアイコンは、GoogleのMaterial Iconsライブラリを使用します。 全ての利用可能なアイコンのリストは、公式のMaterial Iconsページをご覧ください。

(1)公式のMaterial Icons
https://material.io/tools/icons/

(2)Font Awesomeアイコン
https://fontawesome.com/icons?from=io
Font Awesome のアイコンの利用をサポートしています。アイコン名にfa-プレフィックスを付与するだけで使用できます。あなたのプロジェクトにFont Awesomeを導入しておく必要があるので注意して下さい。

(3)Material Design Icons
https://www.npmjs.com/package/vue-material-design-icons
Material Design Iconsのアイコンの利用をサポートしています。アイコン名にmdi-プレフィックスを付与するだけで使用できます。あなたのプロジェクトにMaterial Design Iconsを導入しておく必要があるので注意して下さい。

Vuetifyにアイコンを設定する方法

同時には一種類しか使用できない?未確認

https://vuetifyjs.com/ja/framework/icons

2. Font Awesomeアイコンの導入方法

通常のhtmlファイルで利用する場合は、
https://fontawesome.com/start
へ行き、リンクをindex.htmlのhead内に記載する。

実際にアイコンを使用するときは、
https://fontawesome.com/icons?d=gallery
からアイコン(フリーのもの)を探してから、以下を参考に記載。

https://qiita.com/JotarO_Oyanagi/items/541ea88870ee3b6888e9
@JotarO_Oyanagi
2018年01月05日に投稿
シングルファイルコンポーネント内で Font Awesome をクラス指定で使う
→Vue.jsで用いる場合は、この方法がお勧めです。

  1. codesandboxの場合、Add Dependencyから、@fontawesome/fontawesome-free-webfontsをインストール
  2. main.jsでimport
// Font Awesome のメインファイルを import

import '@fortawesome/fontawesome-free-webfonts/css/fontawesome.css'

// 使用するカテゴリーのファイルを import

import '@fortawesome/fontawesome-free-webfonts/css/fa-brands.css'
import '@fortawesome/fontawesome-free-webfonts/css/fa-regular.css'
import '@fortawesome/fontawesome-free-webfonts/css/fa-solid.css'
  1. アイコンを使用したいコンポーネントのtemplate

内で以下のように記載

<template>
  <div>
    <i class="fab fa-accessible-icon"/>
  </div>
</template>

fabとかfasとか書く必要があるそうです。farも使えますが、fal(Light)だけは有料なのでフリー版では使用できないとのことです。

その他のリンク

https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

https://vuetifyjs.com/ja/components/icons#examples

https://qiita.com/kurararara/items/d76776a7dc2d763a068b
@kurararara
2018年11月07日に更新
Font awesome を Vue.js で使ってみよう

Material Design Iconsアイコンの導入方法

リンク

目次:

前:

次:


00.vue用デザインフレームワークvuetify/06.vuetifyでアイコンを利用.1548935348.txt.gz · 最終更新: 2019/01/31 by adash333