I have the following code for a menu and menu button. I am using Vue CLI 3 and Vuetify
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
...
<v-navigation-drawer fixed app v-model="drawer">
<MyMenu/>
</v-navigation-drawer>
<v-toolbar fixed app>
<v-toolbar-title class="headline text-uppercase">
<v-toolbar-side-icon #click.stop="drawer = !drawer"/>
</v-toolbar-title>
</v-toolbar>
The code works great when the computer is online. However when the computer is offline the menu button icon doesn't show up. Instead it is just replaced with the text 'MENU'. I have looked into installing (vue-material-design-icons, material-design-icons and material-design-icons-iconfont) via npm but have not had any luck getting the icon to display when the computer is offline. I'm not sure if there's a special way to wire it together that I'm unaware of. Can anyone provide insight as to how to solve this issue?
I've read a bunch of links such as https://github.com/vuetifyjs/cordova/issues/11 and How to host material icons offline? but I could not get them to work for me.
Vuetify address this in their documentation:
https://vuetifyjs.com/en/framework/icons#installing-fonts
Essentially:
npm install material-design-icons-iconfont -D
Then:
// main.js
import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify, {
iconfont: 'md'
})
ok, I finally got it working in VS Code.
npm install material-design-icons-iconfont
COPY the folder from the node_modules into you public/css folder (This is what I didn't do before)
Modify the material-design-icons.css file by changing the urls to start with
url('/css/material-design-icons-iconfont/dist/fonts/MaterialIcons-Regular
- in the index.html page of your project, add
<link rel="stylesheet" href="css/material-design-icons-iconfont/dist/material-design-icons.css">
my friends,
https://vuetifyjs.com/en/features/icon-fonts/#material-design-icons
first install mdi with npm install #mdi/font -D or yarn add #mdi/font -D
import in vuetify file import '#mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
and set in config export default new Vuetify({ icons: { iconfont: 'mdi', // default - only for display purposes }, })
Related
I have been using font awesome icon in mine vueJS ("vue": "~2.6.11") application component's CSS.
Could you please help me with following stuff.
th.sortable::after {
font-family: "FontAwesome";
content: "\f0dc";
position: absolute;
left: 10px;
color: #999;
}
I have followed these steps to install font awesome in my Vue app.
yarn add #fortawesome/vue-fontawesome -D
yarn add #fortawesome/fontawesome-svg-core -D
In main.js I have below code:
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome';
import { library } from '#fortawesome/fontawesome-svg-core';
Vue.component('font-awesome-icon', FontAwesomeIcon)
but this does not work for me, If I directly give CDN URL (<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>") of font awesome in index.html it works. I can see sorting icons.
Install font-awesome with npm/yarn
> npm install font-awesome
On your main.js script, add
import 'font-awesome/scss/font-awesome.scss'
Use in component with:
<i class="fa fa-dashboard"></i>
In your main.js, did you add this line after import :
Vue.component('font-awesome-icon', FontAwesomeIcon)
My team and I developed a website using VueJS. In one of the pages, we used Vuetify elements such as vue-extension-panels and v-card. During development, we run using npm run dev and everything looks fine. I believe that all dependencies are installed correctly as it appeared fine during development.
Then, we deployed the web with Netlify. After deployment, Vuetify elements do not seem to appear correctly.
Below are the images that compare before and after deployment on Netlify:
Here is the packages.json:
So, it would be great if someone can explain why it is not showing properly or if someone knows netlify compatibility with Vuetify.
Thanks!
You are able to use any library with netlify. When you use $ vue add vuetify to add the dependency, everything should be fine. If you did install it otherwise, make sure to check the following things.
Vuetify is under dependencies in your package.json.
"dependencies": {
"core-js": "^3.4.3",
"vue": "^2.6.10",
"vuetify": "^2.1.0"
}
You correclty include it in your main.js
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
Vue.config.productionTip = false
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')
vuetify plugin (src/plugins/vuetify.js)
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
Vue.use(Vuetify);
export default new Vuetify({});
You have a vue.config.js
module.exports = {
"transpileDependencies": [
"vuetify"
]
}
I recently installed laravel v5.7 and vue 2. I then installed Element UI
and iView UI Toolkit, everything works perfectly, but anything that uses icons in any iView UI component shows square blocks, but i want the result to look like the documentation where i the alert has an icon. I have searched and tried many solutions but none worked e.g)
What I've done so far
Editting the .htaccess file according to this article
Installed Laravel Cors
Confirmed that the fonts exist in "/fonts/vendor/iview/dist/styles" after running npm run watch
Cleared my cache, history, everything.
5) Checked that the css file is being referenced properly.
6) Checked that the css if referencing the fonts properly. Here is a snippet of the css file.
Tested the application on Chrome, Firefox and Opera, same issue
#font-face{font-family:Ionicons;src:url(/fonts/vendor/iview/dist/styles/ionicons.ttf?f3b7f5f07111637b7f12c1a4d499d056) format("truetype"),url(/fonts/vendor/iview/dist/styles/ionicons.woff?39f116d33948df9636a310075244b857) format("woff"),url(/fonts/vendor/iview/dist/styles/ionicons.svg?3f5fdc44d1e78a861fee03f2d8a59c60#Ionicons) format("svg");
What i have in app.js
/**
* First we will load all of this project's JavaScript dependencies which
* include Vue and Vue Resource. This gives a great starting point for
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the body of the page. From here, you may begin adding components to
* the application, or feel free to tweak this setup for your needs.
*/
import Vue from 'vue'
import App from './App.vue';
// Global event manager, to emit changes/updates
// such as when user has logged in e.g) auth.js
window.Event = new Vue;
// Import Element UI Kit
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import locale from 'element-ui/lib/locale/lang/en';
Vue.use(ElementUI, { locale });
// Import IView UI Kit
import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);
// Import Vue Router for custom routes and navigation
import VueRouter from 'vue-router';
import router from './routes.js';
Vue.use(VueRouter)
const app = new Vue({
el: '#app',
// Render the main app view
render: h => h(App),
// For our custom routes
router
});
A snippet of what i have in the vue template
<template>
<el-row :gutter="20">
<Alert show-icon>An info prompt</Alert>
<Alert type="success" show-icon>A success prompt</Alert>
<Alert type="warning" show-icon>A warning prompt</Alert>
<Alert type="error" show-icon>An error prompt</Alert>
<Alert show-icon>
An info prompt
<template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
</Alert>
<Alert type="success" show-icon>
A success prompt
<span slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </span>
</Alert>
<Alert type="warning" show-icon>
A warning prompt
<template slot="desc">
Content of prompt. Content of prompt. Content of prompt.
</template>
</Alert>
<Alert type="error" show-icon>
An error prompt
<span slot="desc">
Custom error description copywriting.
</span>
</Alert>
<Alert show-icon>
Custom icon
<Icon type="ios-bulb-outline" slot="icon"></Icon>
<template slot="desc">Custom icon copywriting. Custom icon copywriting. Custom icon copywriting. </template>
</Alert>
</el-row>
</template>
<script>
export default {
data(){
return {
}
}
}
</script>
Page after refresh - Network Tab
Page after refresh - Console log Tab
Page after refresh - Elements Tab, the css that is pulling the fonts
The font folder
What i noticed.
The funny thing is that only the Element UI fonts seems to work. I also tried installing font-awesome fonts, and had no success.
OTHER IMPORTANT NOTES
I'm developing on Virtual Host
I'm developing offline using xammp
Found the problem. It had to do with one of my style sheets. I found this code: html, *, body { font-family: 'Helvetica', 'Arial', 'sans-serif' !important; font-weight: 400; font-size: 12px; text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; } The issue was the "html, *, body": { font-family: 'Helvetica', 'Arial', 'sans-serif' !important; } part. If you notice the font family is applied to everything, i guess it then replaces even my icon references. When i removed that. The icons started showing again.
I've tried to follow the documentation on Font Awesome. I have the pro version and have configured NPM for it. I'm using webpack to compile but I'm having issues with it actually rendering. What am I doing wrong?
Here is my app.js
import { library } from '#fortawesome/fontawesome-svg-core'
import { fas } from '#fortawesome/pro-solid-svg-icons'
import { far } from '#fortawesome/pro-regular-svg-icons'
import { fal } from '#fortawesome/pro-light-svg-icons'
import { fab } from '#fortawesome/free-brands-svg-icons'
library.add(fas, far, fal, fab);
I just dumped the following FA icons into my index file
<i class="fas fa-question-circle"></i> <!-- solid style of the question circle icon -->
<i class="far fa-question-circle"></i> <!-- regular style of the question circle icon -->
<i class="fal fa-question-circle"></i> <!-- light style of the question circle icon -->
<i class="fab fa-facebook"></i> <!-- facebook brand icon-->
<i class="fab fa-facebook-f"></i> <!-- facebook "f" brand icon-->
It doesn't seem to do anything with the icons and I don't have any errors compiling. What am I doing wrong?
I'm not a Webpack expert by any means, but there's a little more configuration than just a simple import in order to get Font Awesome to work.
Now this may have changed with FA 5, but I would hope this method is still valid.
This post sums it up quite nicely and is pretty much identical to my current configuration:
Webpack 2 and Font-Awesome Icon Importing
The article has the following (in case the link goes dead):
You'll need a few prerequisite items:
npm install webpack file-loader css-loader sass-loader node-sass
--save-dev
And FA, which you probably already have:
npm install font-awesome --save
** Note: your paths may vary from mine **
In my Webpack module rules I setup to drop the FA assets into a fonts directory:
module: {
rules: [{
test: /\.(eot|ttf|otf)(\?.*)?$/,
loader: 'file-loader',
options: {
limit: 10000,
name: '[name].[ext]',
outputPath: '/fonts/', // where the fonts will go
publicPath: '/assets' // override the default path
}
}]
Once you have all the configurations set, you need to import FA into your main stylesheet:
$fa-font-path: "~font-awesome/fonts";
#import '~font-awesome/scss/font-awesome.scss';
You should then see the assets being pulled into when you run your Webpack build.
I figured out that loading svg-core was the issue. The expected behavior was for the tags to be automatically replaced. Since I was loading svg-core autoReplaceSvg was disabled.
Using the #fortawesome/fontawesome-svg-core package disables autoReplaceSvg and observeMutations by default.
Font Awesome API -> Configuration
I'm new to react and antd.
I started a new react project using create-react-app. I installed antd (ant.design).
I tried out the DatePicker by adding an import and adding it to my render, modifying App.js as follows:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { DatePicker } from 'antd';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<DatePicker/>
</div>
);
}
}
export default App;
In Chrome it seems to work, although the styling is weird.
In IE11 it doesn't load because of a startsWith function call (startsWith not supported in IE11). However, the DatePicker demo at the ant.design website works in IE11.
It seems I'm missing some polyfills / old browser support somehow. If I try to do a production build and serve that, it also has the same error.
What needs done to get antd working for browsers such as IE11 with an app created via create-react-app?
Create-react-app doesn't include polyfills.
I worked around this by installing core-js and importing the es6 module I wanted in the src/index.js file:
import 'core-js/es6';
You can also import only the specific module you want:
import 'core-js/es6/function';
I recommend the first, since you'll most likely end up using more functions throughout your app.