font-awesome in vue project is not working - vue.js

I need to use font-awesome in my vue project to show some icon.
First, I installed font-awesome in my project.
npm install font-awesome --dev-save
After installed, it didn't work, just displayed as a square instead icon.
The error reason is the font file for font-awesome can't be loaded successfully.

After investigation, I copied these font file to a new folder, and reset the variable $fa-font-path's value, like below:
// reset font-awesome variables
$fa-font-path: '/src/common/fonts'
And it works well. Hope could help.

You should be able to use the fonts just by including
import 'font-awesome/css/font-awesome.min.css
in main.js.

Related

Custom font icons are showing cross in box in react-native

I am trying to use Custom fonts in react native. Converted SVG's in custom icon set using Icomoon and tried all the steps from https://www.reactnative.guide/12-svg-icons-using-react-native-vector-icons/12.1-creating-custom-iconset.html.
react-native-vector-icons was installed already.
used react-native link react-native-vector-icons to setup the vector icons framework for the project.
Placed the selection.json and Icomoon.ttf files in assets/fonts folder.
And added "rnpm": { "assets": [ "resources/fonts" ] } in package.json file
Created CustomIcon.js file and added
import {createIconSetFromIcoMoon} from 'react-native-vector-icons';
import icoMoonConfig from './selection.json';
export default createIconSetFromIcoMoon(icoMoonConfig);
In App.js file added following
import CustomIcon from './components/CustomIcon.js'
<CustomIcon name='accounts' size={50} /> //To use the icon
And the Icon is showing ☒ at the icon place.
If anyone have solution please share,
Thank you.
In Android platform icon showed me like this:
after some time of troubleshouting I finally find out solution.
Beacouse of I use my own icon set I created iconSet.ttf from iconSet.svg by IcoMoon App.
In fact I followed this tutorial: https://medium.com/bam-tech/add-custom-icons-to-your-react-native-application-f039c244386c
IcoMoon App created *.ttf and selection.json and problem was in selection.json.
I renamed *.ttf file to myIcons.ttf but I had to change fontFamily and name in the end of file selection.json to same name like I named *.ttf file. In my case myIcons.ttf I renamed name and fontFamily to myIcons in selection.json
I've tried a lot but didn't get solution but finally I got the solution
whenever I used react-native link react-native-vector-icons command it didn't worked properly. So I checked font folder in android/app/src/main/assets/font and I found that my icomoon font file wasn't present there. So I copied the file and manually pasted at the location and it worked .

Why is react-native-svg-icons giving me the error that there are some duplicates for ttf files?

Long story short
I have sunk about 12 hours in my iPhone react-native app. Since yesterday it's not building anymore (out of nowhere). After 5 hours! of debugging I found what may caused the issue but not how to solve it.
I use these packages containing .ttf files / for icons and stuff:
"#fortawesome/fontawesome-svg-core"
"#fortawesome/free-solid-svg-icons"
"#fortawesome/react-native-fontawesome"
"#react-native-community/cli-platform-ios"
"react-native-vector-icons"
And I think there is the problem. Since react-native-vector-icons seems to use also the same .ttf file that one of these packages bring in I get the error:
Multiple Commands produce...
So when I uninstall react-native-vector-icons it works again. But then when I get to the screen where i use this package:
"react-native-elements" (which in the docs it says it needs react-native-vector-icons)
It's complaining that it can't find Fontawesome Icons (the Checkbox Component from elements)
So how can I fix this? I need the app to build obviously and also need the Checkbox Component from react-native-elements. But react-native-elements requires react-native-svg-icons. But when I install it it doesn't even build with the above error that there are multiple .ttf files of the same icon.
I could not figure it out but it has something to do with react-native-elements since they also link the icons that also come with react-native-vector-icons
I solved it by getting rid of react-native-elements and created my own custom Checkbox component.
I had a similar issue associated with the fonts included in the react-native-vector-icons library. I solved it with the following.
I created assets/fonts dir in my project. I added another some fonts that iOS didn't have linked ("Nunito" font in my case), but I didn't include fonts of react-native-vector-icons
I created a new file named react-native.config.js in the root of my project with the following:
module.exports = {
project: {
ios: {},
android: {}
},
assets: ['./src/assets/fonts/'],
};
Then I ran react-native link
Then I went to ios dir (cd ios) and ran pod update
Finally, I ran react-native run-ios and the magic happened
I bassed it on Alex Biddle's post: https://medium.com/better-programming/how-to-add-custom-fonts-to-your-react-native-project-c64305281b9

Unable to resolve "bootstrap/dist/css/bootstrap.min.css" Unable to resolve any other CSS file error

Nothing fixed it, i tried everything online.
I tried to use a different path like ./node_modules/bootstrap etc. I deleted my node_modules an reinstalled it. I copied the bootstrap CSS file and put it inside my project directory and imported it but that didn't work either. Am searching for hours now and i am tired of it, hope someone can help me. I tried to install bootstrap 3 but that didn't change anything. It's like it doesn't allow a CSS to be imported. I also got this error, i was testing just a new css file to be imported but i got Unable to resolve "./style.css" from "App.js" Why is it not able to import a css/bootstrap file?
"dependencies": {
"bootstrap": "^4.0.0-alpha.6",
"react-bootstrap": "^0.32.1",
I guess react native can't import css files? But how do i then use bootstrap?
you can't use bootstrap with react-native as bootstrap currently only works with css. You can you a different library like react-native-material-kit

vuetify free template theme-blog block-level elements

I build with vue-cli webpack and use npm.
I just took this template and used it as it is.
However, the execution screen is broken and the images are not visible.
I have confirmed that images have been loaded from Chrome.
"[Vuetify] v-ripple can only be used on block-level elements".
What can I try?
this is
import "vuetify/dist/vuetify.min.css";
copy this link in you app.js file before importing vuetify.

Can't seem to get to animate.css

So I did
npm install animate.css --save
Which installed it successfully, I can see it in my node_modules
I want to be able to use animate.css in my elixir-phoenix-react project.
I am just unsure where to import/require it and what the path would even be.
I tried to #import "animate.css"; from my app.scss file but that did not work
I also tried to import "animate.css/animate.min.css"; in my app.js file that also did not work.
My question is where do I import/require animate.css so that it works? I want to use it in my react components to add some animation.
After I installed animate.css in the way below
npm install animate.css --save
I simple had to import the css file like this from my node_modules:
#import "~animate.css/animate.css";
Cheers
So, you can see it in your node_modules folder.
Now, you can use #import in your css file, or just <link> in your head but using the entire path where your animate.css is.
It should be something like node_modules/animate/animate.css
If you want to use it in production, just move the css file into your styles folder.