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

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

ただいまの
回答率

90.50%

  • Vue.js

    1108questions

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

  • Laravel

    826questions

    LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

  • Vuetify.js

    23questions

Vuetifyのiconが表示されない。

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 109

EjiOsa

score 2

前提・実現したいこと

LaravelでVueを使用していて、今回はそのVueにVuetifyの導入を試みています。
Vuetify自体の表示にも戸惑っていたのですが、なんとか表示できるようになりました。
過去の質問

デフォルトに設定されているMaterial Iconsを使用したいです。
また、使用方法はCDNではなくローカルでの使用を希望します。

発生している問題

ドキュメントに沿って
$ yarn add material-design-icons-iconfont -Dを実行
import 'material-design-icons-iconfont/dist/material-design-icons.css'を追加しましたが、表示されるのは文字列でアイコンは表示されません。

エラーコード

GET http://localhost/fonts/vendor/material-design-icons-icondist/MaterialIcons-Regular.woff?9219a80f0478e0bfdee5f4c753ce8535 net::ERR_ABORTED 404 (Not Found)

該当のソースコード

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.18",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.1",
        "@fortawesome/fontawesome-free": "^5.7.2",
        "@mdi/font": "^3.5.95",
        "material-design-icons-iconfont": "^4.0.5",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "7.*",
        "url-loader": "^1.1.2",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.5.21"
    },
    "dependencies": {
        "eslint": "^5.12.1",
        "stylus": "^0.54.5",
        "stylus-loader": "^3.0.2",
        "switch-php": "^1.1.3",
        "vee-validate": "^2.1.5",
        "vue-router": "^3.0.2",
        "vuetify": "1.3.16"
    }
}


app.js

require('./bootstrap');
import Vue from 'vue'

//以下、VeeValidateの導入
import VeeValidate, { Validator } from 'vee-validate';
Vue.use(VeeValidate);
import VeeValidateJaLocale from 'vee-validate/dist/locale/ja'
Validator.localize('ja',VeeValidateJaLocale);

//以下、Vuetifyの導入
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import 'vuetify/src/stylus/app.styl'

//以下、Vuetifyのicon
import '@mdi/font/css/materialdesignicons.css'//mdi
import 'material-design-icons-iconfont/dist/material-design-icons.css'//md

Vue.use(Vuetify,{
     iconfont:'md'||'mdi'
 });

import router from './router.js'
import UserRoot from './UserRoot'

Vue.component('admin-root', require('./AdminRoot').default);
Vue.component('user-root', require('./UserRoot').default);

const admin_top = new Vue({
    el: '#admin-top',
    router,
});

const user_top = new Vue({
    el: '#user-top',
    router,
    render:h=>h(UserRoot)
});


ドキュメントのselectを流用してサンプルを作成しました
このコンポーネントを呼び出す側で<v-app>でのラッピングはしています

<template>
    <v-container fluid grid-list-xl>
        <v-layout wrap align-center>

            <v-flex xs12 sm6 d-flex>
                <v-select
                        :items="items"
                        label="Standard"
                >
                    <v-icon>arrow_drop_down</v-icon>
                </v-select>
            </v-flex>
        </v-layout>
    </v-container>
</template>

<script>
    export default {
        name: "TestSelect",
        data() {
            return {
                items: ['Foo', 'Bar', 'Fizz', 'Buzz']
            }
        },
    }
</script>

<style scoped>

</style>

試したこと

上記のapp.js内にある通り、他のicon(@mdi)も使用してみましたが、アイコンは表示されません。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

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

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

  • Vue.js

    1108questions

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

  • Laravel

    826questions

    LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

  • Vuetify.js

    23questions