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

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

ユーザ用ツール

サイト用ツール


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


差分

このページの2つのバージョン間の差分を表示します。

この比較画面にリンクする

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
00.vue用デザインフレームワークvuetify:06.vuetifyでアイコンを利用 [2019/01/31]
adash333 [Material Design Iconsアイコンの導入方法]
00.vue用デザインフレームワークvuetify:06.vuetifyでアイコンを利用 [2019/01/31] (現在)
adash333 [MDIのインストール方法その2?]
行 1: 行 1:
 ====== 06.vuetifyでアイコンを利用 ====== ====== 06.vuetifyでアイコンを利用 ======
  
 +Vuetifyで利用することが多いアイコンは、以下の3つとなります。
 +  -Vuetify公式のMaterial Icons
 +  -Font Awesomeアイコン
 +  -Material Design Icons(名前がMaterial Iconsとそっくりですが、別物で、こちらの方が欲しいものが揃っている印象があります)
 +
 +https://vuetifyjs.com/ja/framework/icons
  
-===== リンク ===== 
 https://vuetifyjs.com/ja/components/icons https://vuetifyjs.com/ja/components/icons
 v-iconコンポーネント v-iconコンポーネント
行 9: 行 14:
 (1)公式のMaterial Icons (1)公式のMaterial Icons
 https://material.io/tools/icons/ https://material.io/tools/icons/
- 
  
 (2)Font Awesomeアイコン (2)Font Awesomeアイコン
行 20: 行 24:
 Material Design Iconsのアイコンの利用をサポートしています。アイコン名にmdi-プレフィックスを付与するだけで使用できます。あなたのプロジェクトにMaterial Design Iconsを導入しておく必要があるので注意して下さい。 Material Design Iconsのアイコンの利用をサポートしています。アイコン名にmdi-プレフィックスを付与するだけで使用できます。あなたのプロジェクトにMaterial Design Iconsを導入しておく必要があるので注意して下さい。
  
-===== Vuetifyにアイコンを設定する方法 ===== +===== 1. Vuetify公式のMaterial Iconsを設定する方法 ===== 
-同時は一種類しか使用ない?未確認+Vuetify公式サイト記載されている方法Vue.jsにVuetifyをインストールすると、自然に使えるようにってます。
  
 +Material Iconsのリスト
 +https://material.io/tools/icons/
  
 +Vue.jsにVuetifyを導入するためには、以下の3つが必要です。
  
-https://vuetifyjs.com/ja/framework/icons+  -Vuetifyをnpm install(CodeSandboxでは、Add DependencyからVuetifyをインストール) 
 +  -index.htmlの<head></head>内に、"Material+Icons"を読み込む 
 +  -src/main.jsで、vuetifyとvuetify.cssをimportして、Vue.use(Vuetify);する。
  
 +index.htmlの追加コード
 +<code>
 +// </head>の直前に以下を挿入
 +<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet"/>
 +</code>
  
 +src/main.jsの追加コード
 +<code>
 +import Vuetify from "vuetify";
 +import "vuetify/dist/vuetify.css";
 +
 +Vue.use(Vuetify);
 +</code>
  
 +上記の3つの作業を行えば、src/App.vueや、その配下のcomponentで、Vuetifyを使用できるらしいです。
  
  
  
-===== Font Awesomeアイコンの導入方法 ===== 
  
 +===== 2. Font Awesomeアイコンの導入方法 =====
 +通常のhtmlファイルで利用する場合は、
 https://fontawesome.com/start https://fontawesome.com/start
 へ行き、リンクをindex.htmlのhead内に記載する。 へ行き、リンクをindex.htmlのhead内に記載する。
行 40: 行 63:
 https://fontawesome.com/icons?d=gallery https://fontawesome.com/icons?d=gallery
 からアイコン(フリーのもの)を探してから、以下を参考に記載。 からアイコン(フリーのもの)を探してから、以下を参考に記載。
- 
-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 で使ってみよう 
  
 https://qiita.com/JotarO_Oyanagi/items/541ea88870ee3b6888e9 https://qiita.com/JotarO_Oyanagi/items/541ea88870ee3b6888e9
行 54: 行 68:
 2018年01月05日に投稿 2018年01月05日に投稿
 シングルファイルコンポーネント内で Font Awesome をクラス指定で使う シングルファイルコンポーネント内で Font Awesome をクラス指定で使う
-→こよいかも!? +Vue.jsで用いる場合は、の方法お勧めです。
  
   -codesandboxの場合、Add Dependencyから、@fontawesome/fontawesome-free-webfontsをインストール   -codesandboxの場合、Add Dependencyから、@fontawesome/fontawesome-free-webfontsをインストール
行 82: 行 95:
  
  
 +その他のリンク
  
  
 +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アイコンの導入方法 ===== 
  
 +
 +
 +
 +
 +===== 3. Material Design Iconsアイコンの導入方法 =====
 +実際にアイコンを使用するときは、
 +https://materialdesignicons.com
 +からアイコンを探してから、以下を参考に記載。
  
 https://www.npmjs.com/package/vue-material-design-icons https://www.npmjs.com/package/vue-material-design-icons
行 96: 行 123:
 https://stackoverflow.com/questions/51792391/vue-cli-3-material-design-icons-installation https://stackoverflow.com/questions/51792391/vue-cli-3-material-design-icons-installation
 →英語ですが、非常にわかりやすい説明です。 →英語ですが、非常にわかりやすい説明です。
 +
 +vue-material-design-iconsを使用してみたいと思います。
 +
 +  -Add Dependencyからvue-material-design-iconsをインストール
 +  -src/main.jsの変更
 +  -src/App.vueでimport
 +
 +src/main.js
 +<code>
 +import "vue-material-design-icons/styles.css"
 +</code>
 +{{:00.vue用デザインフレームワークvuetify:pasted:20190129-185145.png}}
 +
 +src/App.vue
 +<code>
 +// template内
 +<codepen-icon />
 +
 +// script内
 +import CodepenIcon from "vue-material-design-icons/Codepen.vue"
 + 
 +components: {
 +  CodepenIcon
 +}
 +</code>
 +{{:00.vue用デザインフレームワークvuetify:pasted:20190129-194314.png}}
 +{{:00.vue用デザインフレームワークvuetify:pasted:20190129-194529.png}}
 +
 +参考:https://www.npmjs.com/package/vue-material-design-icons
 +アイコンのリスト:https://materialdesignicons.com/
 +Importするときの名前の付け方は、以下を参考。
 +{{:00.vue用デザインフレームワークvuetify:pasted:20190129-193928.png}}
 +
 +==== MDIのインストール方法その2? ====
 +
 +https://dev.materialdesignicons.com/getting-started/webfont
 +→この通りにやってうまくいくのか、いまいち分かりません、、、
 +
 +
 +==== Nuxt.js+Vuetifyでアイコンの利用方法 ====
 +
 +https://qiita.com/high-u/items/b8c708cd3795d2ab4a13
 +@high-u
 +2018年05月05日に更新
 +Nuxt.js で CSS フレームワークを 3 つ試した。
 +→fontAwesomeとMaterial icons両方を同時に使う方法が説明されています。
 +
  
  
行 101: 行 175:
  
 ===== リンク ===== ===== リンク =====
-もくじ+目次: 
 + 
 +前: 
 + 
 +次: 
 + 
 + 
 + 
  
  


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