How can I use Font Awesome in React js? If i use it in my project it didn't show up. This is my code:
import React ,{Component} from 'react'
import './category.css'
import axios from 'axios'
import Course from './courses/course.js'
import Searchfilter from './search/search.js'
class Category extends Component{
state={
category :[]
}
componentDidMount(){
axios.get('data.json').then(res =>{this.setState({category:res.data.content})
})
}
render(){
return (
<div className="category">
<Course corses={this.state.category} />
</div>
)
}
}
export default Category;
There are multiple ways.
It seems for me that the easiest one is to add the font awesome CDN link,
in your 'index.html'
And use Font awesome as you would do with normal HTML
You can just add your CDN link in the HTML page and then use it as you use it in your normal HTML but remember here class attribute is not allowed, you should use className.
You should have jsx code like <i className="fast fa-home"></i>
Add this (CDN link ) in the head of the index.html file :
<script src="https://kit.fontawesome.com/f7b906a276.js" crossorigin="anonymous"></script>
and start using the icons like normal html tags :
<i className="fas fa-tachometer-alt"></i>
Or you can install font awesome package from npm ,
I suggest to follow this tutorial from fontawesome website : Font Awesome with react tutorial
Related
I am new to Bootstrap and I'm building a login screen for an app. I want to use the the MDBIcons for google, twitter and facebook. I followed the documentaion here https://mdbootstrap.com/docs/b5/react/components/buttons/
However, when I view my webpage I can't see the icons. I only a small button in the color of the brand. My code for the google icon button looks like this
import "./App.css";
import React from "react";
import { MDBIcon, MDBBtn } from 'mdb-react-ui-kit';
const SignIn = () => {
return (
<>
<MDBBtn
className="m-1"
style={{ backgroundColor: "#dd4b39" }}
href="#"
>
<MDBIcon fab icon="google" />
</MDBBtn>
</>
);
};
The picture above is what I see, there is no Google logo in the button. I am using React and running 'npm start' to view my webpage on chrome.
Any help would be appreciated.
Did you add style in the public/index.html file? Info about it is here. React MDB Installation Guide.
I mean this:
link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet"/>
If not, try adding this into your index.html file's "head" section.
I am building a website using Gatsby and Bulma. In my Nav.js file, where I create a general format for the buttons at the top of the website, I have a few buttons using Bulma to which I would like to add icons inside. I went off the documentation for adding Bulma buttons with Font Awesome Icons: https://bulma.io/documentation/elements/button/. My code is exactly the same, other that the fact that I have my buttons wrapped in an <a> tag to link to other pages in my website. I have the included <script> file listed in documentation to have Font Awesome Icons available, and my code looks as such:
const Nav = () => {
return (
<div style={{ margin: `3rem auto`, maxWidth: 650, padding: `0 1rem` }}>
<nav>
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<p class="buttons is-outlined is-centered">
<a href="/"><button class="button is-outlined"> <span class="icon">
<i class="fas fa-home"></i>
</span>
<span>Home</span>
</button></a>
<button class="button is-outlined">Projects</button>
<button class="button is-outlined">Experience</button>
</p>
</nav>
</div>
)
}
I'm not sure if I have the script located in the correct part of the file, and I've only tried to put an icon for my Home button which looks like this:
The gap to the left of the "Home" is where I'm guessing the icon should be. I would appreciate any help as to why the icon is not showing up or is showing up blank. Thank you!
I ran into this issue myself so posting here for anyone that is looking for the answer. There are a few ways to make it work, including using the icons as components with a library such as react-fontawesome. However if you're using Bulma then chances are that you specifically don't want to do that, instead you want to use the class names.
So first install the package:
npm i #fortawesome/fontawesome-free
Then in your index.js / app.js / any styling wrapper component you have:
import '#fortawesome/fontawesome-free/css/all.min.css'
Here is a Typescript example I have in front of me. This is a wrapper component that imports all my global styles for nested child components to use:
import React from 'react';
import 'bulma/css/bulma.css';
import '#fortawesome/fontawesome-free/css/all.min.css';
import NavMenu from '../nav-menu';
import Footer from '../footer';
import './layout.css';
const Layout: React.FC<{ light: boolean }> = ({ light, children }) => {
return (
<div className="layout-wrapper">
<NavMenu light={light} />
{children}
<Footer light={light} />
</div>
);
};
export default Layout;
With the help of a friend, what solved the issue was putting the <script> tag in the public/index.html file of the project, and then making an exact copy and naming it index.html and putting it in the static folder in the project. This way, each time a Gatsby server is ran, it will create a copy of the index.html file in the public repository with the Font Awesome Icon script included.
I want to use Font Awesome Icons in my Gatsby project. I would love to include font awesome with a CDN.
Just including it in a script tag doesn't work. I think I need to import it with import ... from '../fontawesome.css' but i am not able to get this working and also wanted to use a cdn for that. Or do I need to parse it with a css library for gatsby?
Please give me advice or hints how to do it.
For anyone visiting this page in late 2018+, I would highly recommend using react-icons.
import { FaBeer } from 'react-icons/fa';
class Question extends React.Component {
render() {
return <h3> Lets go for a <FaBeer />? </h3>
}
}
It's better to include every module that your application needs in just one JS. But if you still want to use CDN, just copy and edit the default template:
cp .cache/default-html.js src/html.js
If you want to pack font-awesome in the project bundle, you may choose:
Use some react icon library. e.g. react-fontawesome
Include the CSS files
For the last option, you must move the css and fonts in pages folder and then include fa in your js file.
import './css/font-awesome.css'
To use a font-awesome class, use the className attribute
<i className="fa fa-twitter"></i>
If you are looking get the js code from a CDN, use Netlify
Here is the recommended way to use Font-Awesome icons in Gatsby:
Add the following code snippet (mentioned in official react-fontawesome docs) in your higher components like Layout or Page.
import { library } from '#fortawesome/fontawesome-svg-core'
import { fab } from '#fortawesome/free-brands-svg-icons'
import { faCheckSquare, faCoffee } from '#fortawesome/free-solid-svg-icons'
library.add(fab, faCheckSquare, faCoffee)
First npm install -S and import free-brands-svg-icons or/ and free-solid-svg-icons only if you need icons from them.
Then in each component where to use icons, add the following code:
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome"
Now use it in your component like shown below:
<FontAwesomeIcon icon={["fab", "apple"]} style={{color:"#000000"}} />
I believe it is at this step where things go wrong. You need to include 'fab' in icon prop as shown above if you are adding brand icons. Otherwise if using (let say) solid icons, then just enter the spinal-case (e.g check-square) styled name of the icon without [] enclosing brackets in icon prop instead of camelCase (checkSquare) and you don't need to include 'fa' in the beginning.
Just an addition to last comment.
The reason you need to pass an array to icon prop is because the default prefix used in FontAwesomeIcon component is fas. So if you supply icon from #fortawesome/free-solid-svg-icons (e.g. faHome) you don't need to add prefix.
<FontAwesomeIcon icon={home} />
For all other packages as e.g. '#fortawesome/free-brands-svg-icons' you have to supply array to icon specifying prefix
<FontAwesomeIcon icon={["fab", "laravel"]} />
Also, nice to know thing, is that you DON'T need to import all fab icons into your library. Same like with solid icons ('fas') you can import just icons you need and then just add them to library.
Something like:
// fab icon (brand)
import { faLaravel } from "#fortawesome/free-brands-svg-icons"
// fas icon (solid)
import { faHome } from "#fortawesome/free-solid-svg-icons"
library.add(faHome, faLaravel)
The simplest solution is to add font-awesome script in layout.js <Helmet> tag:
<Helmet>
<html lang={site.lang} />
<link
rel="shortcut icon"
type="image/x-icon"
href={Favicon}
></link>
{/* adding google fonts */}
<link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet"/>
{/* adding font-awesome icons */}
<script src="https://kit.fontawesome.com/02130b3d51.js" crossorigin="anonymous"></script>
<style type="text/css">{`${site.codeinjection_styles}`}</style>
<body className={bodyClass} />
</Helmet>
Now add simply, the font-awesome icons where ever you like:
<h2 onClick={scrollToBottom} style={buttonStyle} className="scroll-btn" aria-label="to bottom" component="span">
{/* adding font-awesome icon */}
<i className="fas fa-arrow-alt-circle-down"></i>
</h2>
It's really this simple!!
This question confused me a long time,in my own project every time I want to use Icon of antd,it doesn't work.I don't know what's wrong,who knows please tell me,I am greatly appreciated.
I find the problem,so foolish am I.I don't import the style,just add "import 'antd/dist/antd.css'; ".It's OK now,hoping this can help others new to antd like me.
#Tian, I was stumped by that as well. Your solution is exactly what worked for me. Here's some code that worked for me:
import React from 'react';
import Icon from 'antd/lib/icon';
import 'antd/dist/antd.css';
class Header extends React.Component {
render() {
return (
<div className='Header'>
<span className='Header__title'>Happen</span>
<a className='Icon' href='#' id='bangButton'>
<Icon type='exclamation-circle-o'/>
</a>
<a className='Icon' href='#' id='plusButton'>
<Icon type='plus-circle-o'/>
</a>
</div>
);
}
}
export default Header;
This problem arises due to the missing css file that is required to antd component
Either add statement import 'antd/dist/antd.css'; or create your own less file and import it.
I installed bootstrap package with command:
meteor add twbs:bootstrap
And I made some example codes, but it does not work. Bootstrap style is not applied to button.
App.jsx
import React from 'react';
export default class App extends React.Component {
render() {
return (
<button class="btn btn-info">Button</button>
);
}
}
Could you help me, please? Thank you.
You should use className attribute instead of class.