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)
Related
I'm trying to override the background color on the input box from element-ui
but never worked
<template>
<el-input v-model="form.text" type="text" clearable></el-input>
</template
<style lang="stylus" scoped>
.el-input__inner
background-color #f4f4f4
</style>
base on the information I gathered from google
chrome dev tool snapshot
First option:
Try to override
.el-input__inner {
background-color: #f4f4f4 !important;
}
Second option:
Create a seperate css file which is loaded in after the element-ui does.
Open element.js in the plugins folder.
Add import your styles after element-plus, like this:
import ElementPlus from "element-plus";
import "../element-variables.scss";
import "../assets/styles/global.scss"; // our custom styles
export default (app) => {
app.use(ElementPlus);
};
I created a .less file in my assets/css/myfile.less Nuxt folder and I added some CSS to it.
.edit-btn-color {
background-color: #b1c646;
color: white;
}
.edit-btn-color:hover {
background-color: darken(#b1c646, 10%);
color: white;
}
and in nuxt.config.js I do the following:
export default {
less: ['#/assets/css/myfile.less'],
}
But it does not work.
Since Nuxt2 is still using Webpack4, you need to install the v7 of less-loader (v8 is using Webpack5)
yarn add less-loader#^7 less
Then, create a .less file somewhere, like /assets/css/myfile.less
And use it in nuxt.config.js with this
export default {
css: ['~/assets/css/myfile.less'],
}
The key to use here is css, it's the same for SCSS, SASS, Less, Stylus and so on, as shown in the documentation: https://nuxtjs.org/docs/2.x/features/configuration#the-css-property
The answer for Nuxt v3 would be:
Install Less: npm i less (no less-loader needed).
For Global styles add them to your nuxt.config.ts like this:
export default defineNuxtConfig({
css: ['~/assets/less/main.less'],
})
In your components you could use Less like this:
<style lang="less" scoped>
#import (reference) '../assets/less/helpers.less';
nav {
background-color: darkkhaki;
.my-great-style; /* Imported from helpers.less */
}
</style>
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
The scrollToTop method works in this codepen, but when I use it in my app (uses single file components) it throws these 2 errors when I hit the button with #click="scrollToTop":
[Vue warn]: Error in event handler for "click": "TypeError: this.$refs.scrollContainer.scroll is not a function"
TypeError: this.$refs.scrollContainer.scroll is not a function
UPDATE
Can someone reproduce it? I've created a new project from this boilerplate and I get the same result there
# Install vue-cli and scaffold boilerplate
npm install -g vue-cli
vue init vuetifyjs/electron my-project
# Install dependencies and run your app
cd my-project
yarn # or npm install
yarn run dev # or npm run dev
Could someone try to reproduce it by creating a test project and add the following code into the App.vue:
1) add this CSS
html {
overflow: hidden;
}
.content {
max-height: 100vh;
}
.scrollContainer {
height: 100%;
overflow-y: scroll;
backface-visibility: hidden;
}
2) This method:
methods: {
scrollToTop () {
console.log(this.$refs.scrollContainer)
return this.$refs.scrollContainer.scroll ({
top: 0,
behavior: 'smooth'
})
}
}
3) This div around the v-container:
<div class="scrollContainer" ref="scrollContainer">
</div>
4) and the button:
<v-btn fab
dark
fixed bottom right
#click="scrollToTop" ref="button">
<v-icon>keyboard_arrow_up</v-icon>
</v-btn>
P.S.
When I added console.log(this.$refs.scrollContainer) into the scrollToTop function I get the element in the console:
Electron 1.8.2 is based on Chrome 59.0.3071.115, which has partial support of the relatively new "Scroll Behavior" specification (which includes the Element.scroll() method you are using).
Meanwhile you can use the smooth scroll polyfill:
npm install smoothscroll-polyfill
And in App.vue:
require('smoothscroll-polyfill').polyfill();