I want to connect fa in vue Doing
*************
import { library } from '#fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
import { faVuejs } from '#fortawesome/free-brands-svg-icons'
******************
library.add(faVuejs);
Vue.component('font-awesome-icon', FontAwesomeIcon)
************
In component:
<font-awesome-icon :icon="[ 'fab', 'twitter' ]" />
Console error:
Could not find one or more icon(s) {prefix: "fab", iconName: "twitter"}
But, if im use:
<font-awesome-icon :icon="[ 'fab', 'vuejs' ]" />
Working fine ... What's wrong?
You have to import the faTwitter icon, and add it to the library like you're doing with the Vue icon:
import { faTwitter } from '#fortawesome/free-brands-svg-icons'
library.add(faTwitter)
demo
Related
I'm trying to make a iconography with storybook for all the icons in my vue project.
I just want to use icons from font awesome.
My main.ts file looks like:
import { createApp } from 'vue'
import App from './App.vue'
import { library } from '#fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
import { faUserSecret } from '#fortawesome/free-solid-svg-icons'
library.add(faUserSecret)
createApp(App)
.component('font-awesome-icon', FontAwesomeIcon)
.mount('#app')
The storybook file (iconography.stories.mdx):
import { Meta, Title, IconGallery, IconItem } from '#storybook/addon-docs/';
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
import { faUserSecret } from '#fortawesome/free-solid-svg-icons'
<Meta title="Design Tokens/Iconography" />
# Iconography
<IconGallery>
<IconItem name="user-secret">
<font-awesome-icon icon="fa-solid fa-user-secret" />
</IconItem>
</IconGallery>
The icon is not showing just a box for it:
You need to setup fontawesome in your storybook preview.js file. There you can add the following:
import { library } from '#fortawesome/fontawesome-svg-core';
import { fas } from '#fortawesome/free-solid-svg-icons';
library.add(fas);
then, your story would look something like this:
import { Meta, Title, IconGallery, IconItem } from '#storybook/addon-docs/';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
<Meta title="Iconography" />
# Iconography
<IconGallery>
<IconItem name="user-secret">
<FontAwesomeIcon icon="user-secret" />
</IconItem>
</IconGallery>
I've been trying to make this work:
<q-btn flat round icon="logo-linkedin" />
But it does not work at all!
Here's how it looks on ionicons:
<ion-icon name="logo-linkedin"></ion-icon>
Despite having all possible imports in quasar-user-options.js file:
import "./styles/quasar.scss";
import "#quasar/extras/roboto-font/roboto-font.css";
import "#quasar/extras/material-icons/material-icons.css";
import "#quasar/extras/material-icons-outlined/material-icons-outlined.css";
import "#quasar/extras/material-icons-round/material-icons-round.css";
import "#quasar/extras/material-icons-sharp/material-icons-sharp.css";
import "#quasar/extras/fontawesome-v5/fontawesome-v5.css";
import "#quasar/extras/ionicons-v4/ionicons-v4.css";
import "#quasar/extras/mdi-v4/mdi-v4.css";
import "#quasar/extras/eva-icons/eva-icons.css";
import { Notify } from "quasar";
export default {
config: {},
plugins: { Notify },
};
What am I missing?
Okay, thanks to the guys on Discord and Github discussions, this works now:
import "./styles/quasar.scss";
import iconSet from "quasar/icon-set/ionicons-v4";
import "#quasar/extras/ionicons-v4/ionicons-v4.css";
import { Notify } from "quasar";
export default {
config: {
iconSet,
},
plugins: { Notify },
};
then:
<q-btn flat round icon="ion-logo-linkedin" />
I'm new to Vue, can't find the exact answer how to use FA SVG icons in v-icon and prepend-icon.
If i use:
<font-awesome-icon :icon="dekstop" color="gray"></font-awesome-icon>
Icons are displayed, but how i can use FA SVG icons in v-icon and prepend-icon?
Sample:
<v-autocomplete v-model="replUser"
:items="users"
color="accent white--text"
label="User"
prepend-icon="dekstop></i>" // i can use material font icons here, but FA SVG not worked
>
</v-autocomplete>
my main.js:
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
// import colors from 'vuetify/es5/util/colors'
import './plugins/vuetify'
import App from './App.vue'
import i18n from './i18n'
import {
library
} from '#fortawesome/fontawesome-svg-core'
import {
FontAwesomeIcon
} from '#fortawesome/vue-fontawesome'
import {
fas
} from '#fortawesome/free-solid-svg-icons'
Vue.component('font-awesome-icon', FontAwesomeIcon) // Register component globally
library.add(fas) // Include needed icons.
Vue.use(Vuetify, {
iconfont: 'faSvg',
})
Vue.config.productionTip = false
new Vue({
i18n,
render: h => h(App)
}).$mount('#app')
What am I doing wrong?
If you want to use svg icons in v-icon/prepend-icon, then you need to access them through $vuetify.icons object. Any other text in the v-icon/prepend-icon will be interpreted as webfont/css class.
But for use $vuetify.icons object you should register custom icons. Example:
import Vue from "vue";
import Vuetify from "vuetify";
import { library } from "#fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "#fortawesome/vue-fontawesome";
import { faVuejs } from "#fortawesome/free-brands-svg-icons";
Vue.component("font-awesome-icon", FontAwesomeIcon); // Register component globally
library.add(faVuejs); // Include needed icons.
Vue.use(Vuetify, {
icons: {
vue: {
component: FontAwesomeIcon,
props: {
icon: ["fab", "vuejs"]
}
}
}
});
And now you can use vue-brand icon:
<v-icon>$vuetify.icons.vue</v-icon>
<v-text-field prepend-icon="$vuetify.icons.vue"/>
Also, you can use without register via font-awesome-icon:
<font-awesome-icon :icon="['fab', 'vuejs']" />
<v-text-field>
<font-awesome-icon :icon="['fab', 'vuejs']" slot="prepend"/>
</v-text-field>
Out of the box vuetify has a preset of icons config that can be associated with SVG:
...
import { fas } from "#fortawesome/free-solid-svg-icons";
...
library.add(fas);
...
Vue.use(Vuetify, {
iconfont: "faSvg"
});
But for use it you should call $vuetify.icons again (vuetify just wrap preset as component):
<v-icon>$vuetify.icons.warning</v-icon>
Full example codesandbox
From Vuetify documention:
Font Awesome is also supported. Simply use the fa- prefixed icon name.
Please note that you still need to include the Font Awesome icons in
your project.
Maybe it helps you. But, without your sample code I can't be sure
<v-autocomplete v-model="replUser"
:items="users"
color="accent white--text"
label="User"
prepend-icon="fa-dekstop">
</v-autocomplete>
i tried this-
import { library } from '#fortawesome/fontawesome-svg-core'
import { faFacebook } from '#fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
library.add(faFacebook)
Vue.component('font-awesome-icon', FontAwesomeIcon)
But apparently there's no faFacebook in free-svg-icons. How to include the facebook icon?
I faced the same problem. Solved with this:
terminal:
npm install --save #fortawesome/free-brands-svg-icons
main.js:
import { faFacebook } from '#fortawesome/free-brands-svg-icons'
library.add(faFacebook)
inside code:
<font-awesome-icon :icon="{ prefix: 'fab', iconName: 'facebook' }"/>
check the fontawesome-free-brands for faFacebookSquare
import { faFacebookSquare, faFacebookMessenger } from '#fortawesome/fontawesome-free-brands';
does that work?
edit
just saw that faFacebookF is available there too, I just missed it
import { faFacebookF } from '#fortawesome/fontawesome-free-brands';
Is there a way to install fontawesome in Vue? I tried few tutorials but they are all useless and do not work or icons are empty or plugin does not render at all!!!! I don't want to import the font by script, I want to install it in my application. I tried this tutorial (https://github.com/FortAwesome/vue-fontawesome) but whatever I did the icons do not render, maybe someone can point me to the solution?
Here is my code but the icons even do not render:
import FontAwesomeIcon from '#fortawesome/vue-fontawesome';
export default {
name: 'App',
components:{FontAwesomeIcon}
}
<template>
<div id="app"><font-awesome-icon icon="spinner" /></div>
</template>
also, I get an error in the console:
Check not find one or more icon(s) {prefix: "fas", iconName:
"spinner"} {}
I think you might be missing some dependencies. Please try
<script>
import fontawesome from "#fortawesome/fontawesome";
import brands from "#fortawesome/fontawesome-free-brands";
// import 1 icon if you just need this one. Otherwise you can import the whole module
import faSpinner from "#fortawesome/fontawesome-free-solid/faSpinner";
import FontAwesomeIcon from "#fortawesome/vue-fontawesome";
fontawesome.library.add(brands, faSpinner);
// or .add(brands, solid) if you need the whole solid style icons library/module
export default {
name: "App",
components: {
FontAwesomeIcon
}
};
</script>
Working example: https://codesandbox.io/s/ov6o0xk23y
Remember to load each icon that you are using. My icons weren't rendering because I forgot to add them to the library.
Template:
<icon icon="lock" />
JS:
import Vue from 'vue';
import { library } from '#fortawesome/fontawesome-svg-core';
import {
// import icons here
faLock,
} from '#fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome';
import App from './App.vue';
// add icons to library here
library.add(faLock);
Vue.component('icon', FontAwesomeIcon);
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
}).$mount('#app');
Also, in the case that you are using multiple icons, it can be easier to import and load the whole set of icons e.g.
...
import { fas } from "#fortawesome/free-solid-svg-icons";
library.add(fas);
...
I had the same issue with:
package.json
"#fortawesome/fontawesome-svg-core": "^1.2.36",
"#fortawesome/free-brands-svg-icons": "^5.15.4",
"#fortawesome/free-solid-svg-icons": "^5.15.4",
"#fortawesome/vue-fontawesome": "^2.0.2",
Relying on a previous project where it worked, I upgraded #fortawesome/vue-fontawesome to ^3.0.0-4, which fixed the issue for me.
I was getting the following warning and not getting the icons displayed:
"export 'default' (imported as 'FontAwesomeIcon') was not found in '#fortawesome/vue-fontawesome'
Solution for me was to import an specific portion instead of going to default
changed from:
import FontAwesomeIcon from '#fortawesome/vue-fontawesome'
to
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'