質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

SPA(Single-page Application)

SPA(Single-page Application)は、単一のWebページのみでコンテンツの切り替えができるWebアプリケーションもしくはWebサイトです。ブラウザでのページ遷移がないため、デスクトップアプリケーションのようなUXを提供します。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

受付中

VueにてSPAを構築していますが、Googleマテリアルアイコンを表示させる方法を教えていただきたいです

ma-3
ma-3

総合スコア0

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

SPA(Single-page Application)

SPA(Single-page Application)は、単一のWebページのみでコンテンツの切り替えができるWebアプリケーションもしくはWebサイトです。ブラウザでのページ遷移がないため、デスクトップアプリケーションのようなUXを提供します。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

1回答

0評価

0クリップ

429閲覧

投稿2021/12/17 13:27

前提・実現したいこと

初心者の質問で恐縮ですが、回答いただけますと幸いです。
Vue Routerで、SPAを構築しようとしています。
Googleマテリアルアイコンを読み込んで、アイコンを表示させようとしています。
vuetifyは利用せずに実現したいです。

発生している問題・エラーメッセージ

index.htmlでマテリアルアイコンの読み込みをさせて、
各vueファイルにてアイコンを表示させようとしていますが、
文字化けして表示を行えません。

該当のソースコード

<index.html>
・・・

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.5.55/css/materialdesignicons.min.css" rel="stylesheet">

・・・

<BookSearch.vue>
・・・

<button class="button-base button-fab-add mt-16" @click="addBookList(index)"> </button>

・・・

<_button.scss>
.button-fab-add {
width: 32px;
height: 32px;
border: 0 solid;
border-radius: 40px;
background-color: $color-primary;
box-shadow: 0 0 5px #000000ee;

&::after { content: "\e145"; font-family: 'Material Icons'; color: #fff; font-size: 1.5rem; }

}

試したこと

最初は

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> としていましたが、 これを”該当のソースコード”の内容に修正したところ 一時正常に表示されたのですが、突然また文字化けするようになってしまいました。 (特に何もいじっていないはずです)

補足情報(FW/ツールのバージョンなど)

"vue": "^2.6.11",
"vue-router": "^3.2.0"

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

SPA(Single-page Application)

SPA(Single-page Application)は、単一のWebページのみでコンテンツの切り替えができるWebアプリケーションもしくはWebサイトです。ブラウザでのページ遷移がないため、デスクトップアプリケーションのようなUXを提供します。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。