I'm trying to implement FontAwesome5 to my website with NPM and Webpack. Here is my code:
import fontawesome from '#fortawesome/fontawesome'
import faFacebookF from '#fortawesome/fontawesome-free-brands/faFacebookF'
import faYoutube from '#fortawesome/fontawesome-free-brands/faYoutube'
import faInstagram from '#fortawesome/fontawesome-free-brands/faInstagram'
fontawesome.library.add(faYoutube)
fontawesome.library.add(faFacebookF)
fontawesome.library.add(faInstagram)
The situation is: only the first icon added in with fontawesome.library.add works and others - not. In this example only Youtube icon is rendered and other looks like that:
If I just change the order and put Facebook icon to the top like that:
import fontawesome from '#fortawesome/fontawesome'
import faFacebookF from '#fortawesome/fontawesome-free-brands/faFacebookF'
import faYoutube from '#fortawesome/fontawesome-free-brands/faYoutube'
import faInstagram from '#fortawesome/fontawesome-free-brands/faInstagram'
fontawesome.library.add(faFacebookF)
fontawesome.library.add(faYoutube)
fontawesome.library.add(faInstagram)
Only Facebook icon will work like that:
There were no other changes in JS or HTML, just the icons order. If I put ath the top another icon which is not used in my HTML - all 3 icons will be empty.
Could you please help me with this strange issue?
P.S there are no js issues in devtools or in webpack at all
As only one pack was in use - 'fontawesome-free-brands' you should use coma separated list like that:
fontawesome.library.add(faFacebookF,faYoutube,faInstagram)
Related
Is there a way how to import data-range (using date-fns) component in Vue 3 using Ant Design component library? I am able to import date-picker, but not range-picker.
import ADatePickerFns from "ant-design-vue/es/date-picker/date-fns";
I tried everything, search everywhere - but without success. Can anybody help? Thanks a lot!
I'm on Nuxtjs 2.15.4 and I wanna import my layouts from different directories.
for example
import cms from '~~/mylayout/cms.vue'
export default{
layout: cms
}
how can I achieve that?? the important thing is that my layouts be able to import by import function.
I'm doing this for dynamic themes, so that i can read layouts from different directories.
And, how can I change the default layout name?? As I wanna implement dynamic layouts, I probable need to import default layout too. so where I can tell Nuxt that for example ~~/mylayout/d.vue is my default layout?
You don't need to import the layout, it is done for you. Simply put it in the layouts directory.
When I try to use a v-icon, I am not able to see the icon but just a square as shown in the image attached. all the other vuetify components work fine.
I am using it just like this <v-icon> mdi-domain </v-icon>
I have tried import "#mdi/font/css/materialdesignicons.css"; in main.js but it has not worked. I dont want to use the CDN link.
It is also not showing up in the expandable vuetify table.
I am using styledcomponents in my CRA. The thing is that when I inspect an element in the browser all I see is something like this:
<div class="js-cskdjf fdsfsjk fdsfds">..</div>
No idea what component this is , how can I figure this out? I have ejected the app too.
If you are using CRA v2, then it supports babel-plugin-macros
You can use the babel macro from styled components by changing the main import to:
import styled, { createGlobalStyle } from 'styled-components/macro';
This will bring in all properties of the babel plugin that styled components (which you will have to eject to add) This includes better debugging experience, by showing component names inside the devtools. More more information on this, read docs here.
You can use 'React Developer Tools' extension to see the Components layout:
for Chrome,
for FireFox.
I am using ag-grid in my project which uses vuetify.js and is based on vueJS. I am facing problems with the ag-grid themes. Whenever I use the ag-material theme the outcome is different from the one shown ag-grid website. I just get a very basic theme when I add material theme. Can anyone help?
you need to make sure you import both
import "/node_modules/ag-grid/dist/styles/ag-grid.css";
import "/node_modules/ag-grid/dist/styles/theme-material.css";
and then, make sure you include both classes <ag-grid-vue class="ag-material ag-theme-material">