I'm trying to use Font-Awesome 5.13.0 in a react.js application, is there a way to use the icons like this:
<i className="fas fa-tachometer-alt fa-fw "></i>
Instead of using the 'official react way' like:
import { faHome } from "#fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
<FontAwesomeIcon icon={faHome} />
Thanks in advance.
You can hotlink the css from a CDN like https://www.bootstrapcdn.com/fontawesome/ (remember to configure CSP)
Another option is to import the Font Awesome css from node modules
import '../node_modules/#fortawesome/fontawesome-free/css/all.css';
You'll need to have your build tool configured to load sass/css files like so for webpack
{
test: /\.(sass|scss|css)$/,
use: ['style-loader','css-loader','sass-loader']
},
You'll need to have your build tool configured to load font files like so for webpack
{
test: /\.(svg|eot|woff|woff2|ttf)$/,
use: ['file-loader']
}
Related
I need to add some social media icons I'm not sure other than font awesome if there is anything else I can use for free, I installed the package and added
import { FontAwesomeModule } from '#fortawesome/angular-fontawesome';
here is my Style.css :
#font-face {
font-family: "FutoSans";
src: local("FutoSans"), url(assets/fonts/FutoSans-Bold.ttf) format("truetype");
}
here is my angular.json
"styles": [
{
"input": "node_modules/#progress/kendo-theme-default/dist/all.css"
},
"src/styles.css",
"node_modules/#fortawesome/fontawesome-free/css/all.min.css"
],
but when I use for example the following tag, it does not show anything
<i class="fab fa-instagram"></i>
please read the documentation given by the fontawesome angular package. You can get the icons with:
TS
import { faCoffee } from '#fortawesome/free-solid-svg-icons'; <---
#Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
faCoffee = faCoffee; <----
}
HTML
<fa-icon [icon]="faCoffee"></fa-icon>
If you want to use only the CSS classes in your HTML download the free fontawesome version (npm i #fortawesome/fontawesome-free) and include the CSS and .js in your angular.json like this:
"styles": [
"src/styles.scss",
"node_modules/#fortawesome/fontawesome-free/css/all.min.css"
],
"scripts": [
"node_modules/#fortawesome/fontawesome-free/js/all.min.js"
]
then you can use the "fab fa-icon" classes
Try this I have this in my project.
npm install font-awesome --save
Add font-awesome link in angular.json :
"../node_modules/font-awesome/css/font-awesome.css"
Use in HTML
<i class="fa fa-cog fa-spin"></i>
I'm trying to add a Google Font (Mukta Malar) in my Gatsby site.
I've seen many articles on adding Google fonts to a Gatsby site and most of them seem to use this plugin: gatsby-plugin-prefetch-google-fonts.
I've used the above plugin in my site by adding it in the gatsby-config.js file as:
plugins: [
{
resolve: `gatsby-plugin-prefetch-google-fonts`,
options: {
fonts: [
{
family: `Mukta Malar`
},
],
},
}
]
and added the font family to my css file as well:
* {
font-family: "Mukta Malar", sans-serif;
}
But the Google font is not applying to the site. Is there a hidden step that I'm missing in my code?
This plugin seems to be no longer maintained and it's part of escalade monorepo (which throws a 404 error), last commit in the core from 1 year ago.
I would suggest gatsby-plugin-google-fonts that allows you to display: swap your fonts without affecting your performance. In your case:
{
resolve: `gatsby-plugin-google-fonts`,
options: {
fonts: [
`mukta malar`
],
display: 'swap'
}
}
Google fonts are available on npmjs.org with the name typeface-XXXXXX representing the name of the font family on the Google fonts website.
If I want to add the Poppins font on my Web site, I just need to add it on the package.json file:
yarn add typeface-poppins
Then in my site, i can use require("typeface-poppin") to use the font:
import React from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"
require('typeface-poppins')
const IndexPage = () => (
<Layout>
<SEO title="Home" />
<h1 style={{fontFamily: "Poppins"}}>Hi people</h1>
<p>Welcome to your new Gatsby site.</p>
<p>Now go build something great.</p>
<div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
<Image />
</div>
<Link to="/page-2/">Go to page 2</Link> <br />
<Link to="/using-typescript/">Go to "Using TypeScript"</Link>
</Layout>
)
export default IndexPage
As other mentioned, include the fonts in your Gatsby project, this will be way faster!
Gatsby has a really great write up about this on their page actually.
https://www.gatsbyjs.com/docs/how-to/styling/using-web-fonts/
Here is a an example:
First you install the font using npm or yarn:
yarn add #fontsource/mukta-malar // npm install
#fontsource/mukta-malar
Then in your layoutfile for the page, import the font like this:
import "#fontsource/mukta-malar"
You the reference the font in css like you would do it with any google font:
font-family: 'Mukta Malar', sans-serif;
If you only need a few specific weights or variants you can also import only parts of the package like this:
import "#fontsource/mukta-malar/500.css"
this will only load weight 500 aka "medium" weight.
I am not able to load style sheet in my react app:
.App {
text-align: center;
}
.App p {
color: blue;
}
I am trying to print file on console then this is empty.
If you are starting the project from scratch using React, you will probably need to learn how to use the bundling tools such as
Webpack
Rollup
Parcel
They will give you the ability to use tools like css-loader which will allow you to import your css file into your react component in the header in this way:
import 'app.css'
Alternatively, you can just use react 'style' attribute directly on the component:
const style = {
app: {
textAlign: 'center'
},
p: {
color: 'blue'
}
};
And you can apply the style in this way:
<App style={style.app}>
<p style={style.p}>Hello world!</p>
</App>
For more information of using style, you can check the React official docs here: https://reactjs.org/docs/dom-elements.html#style
I'm currently working with rails and reactjs. I'm having difficulties using css in my reactjs files. It seems like every time i try to use it, no change is being applied at all. In my App.jsx file I have this:
import React from "react";
import styles from "./styles.css";
export default class Register extends React.Component {
render() {
return (
<div className={styles.container}>
<h1> this text should appear to the right </h1>
</div>
);
}
}
And in my styles.css file I have this:
.container {
width:40%;
text-align:right;
}
For the record I am using webpack. Can anyone help me understand why the css isn't having any effect on my jsx components. I've looked all over for help but was unable to put the pieces together.
If it matters, this is how my "config/webpack/development.js" file looks like:
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
module.exports = environment.toWebpackConfig()
It depends on the webpack loader settings. If you are using css-loader as configured in react-scripts (as of 1.1.5), then the classNames are loaded using {modules: false} option, i.e. global styles, which can be referenced as strings in JSX code:
import "./styles.css";
... className="container" ...
Or you can load local styles using following CSS-file syntax:
:local .container {...
Or edit your webpack.config.js appropriately (see https://github.com/webpack-contrib/css-loader#scope for the official documentation of various options).
seems like you didn't enable an option { modules: true } for css-loader in webpack config
take a look
webpack-contrib/sass-loader#206
https://github.com/webpack-contrib/css-loader#options
Taken from: https://github.com/facebook/create-react-app/issues/1350
What is the best way to have a global css file in Vuejs for all components? (Default css like bg color, button styling, etc)
import a css file in the index.html
do #import in main component
put all the css in the main component (but that would be a huge file)
Import css in your index.html, but if you're using webpack you can just import your stylesheets in your main js config and all your components will get the css.
As comments below suggested if using webpack adding this to main.js works:
import './assets/css/main.css';
I found the best way is to create a new file in the assets folder, I created as global.css but you can name anything of your choice. Then, import this file global.css file in the main.js.
Note: Using this approach you can also create multiple files if you think the global.css is getting really large then simply import all those files in the main.js.
#\assets\global.css
/* move the buttons to the right */
.buttons-align-right {
justify-content: flex-end;
}
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './routes'
Vue.config.productionTip = false
// Importing the global css file
import "#/assets/global.css"
new Vue({
router,
render: h => h(App)
}).$mount('#app')
In App.vue you can add a style property to declare you CSS file:
<style>
#import './assets/css/global.css';
</style>
You can also do something like this: https://css-tricks.com/how-to-import-a-sass-file-into-every-vue-component-in-an-app/
My folders are mostly structured like this:
- src
- assets
- _global.scss
- _colors.scss
- _fonts.scss
- _paragraphs
- index.scss // <-- import all other scss files.
This also works with normal css.
create a new css file in your assets folder for example : global.css
import "global.css" to main.js
import '#/assets/main.css';
There are to two ways, as I know, to achieve this.
Approach 1
Utilize vue.config.js configuration, less config can also be replaced with sass:
module.exports = {
css: {
loaderOptions: {
less: {
additionalData: `#import '#/style/common.less';`
}
}
}
}
Approach 2
In your .vue file, make your style looks like this:
<style lang="less">
#import (reference) "../../style/variables.less";
#app {
background: #bgColor;
}
</style>
Note: the (reference) flag is used to make variables defined in variables.less take effect. If you don't have variables, #import "../../style/variables.less"; is sufficient to do the trick.
For your reference, you can also take a look at this link:
https://github.com/tjcchen/vue-practice/tree/master/multipage-app
Sass announced their new module system. Why don't you use #use and #forward?
My approach is the best way to use scss with vite.
Use defineConfig to setup global scss (colors, mixin) and reuse in all component without import
css: {
preprocessorOptions: {
scss: {
additionalData: `#use "~/styles/main.scss" as *;`,
},
},
},
Here: code sandbox
create a vue.config.js file in your root directory
Create a styles folder inside your src folder and you can create your global style file here for example base.scss
to use scss install two dependencies
npm install node-loader sass-loader
Inside your vue.config.js paste code from below
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: `#import "#/styles/base.scss";`
}
}
}
};