Develop Reference

How can I use Font Awesome in React.js

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

Font Awesome icons not showing up using Bulma in Gatsby

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.

How to upload a document to a local path via HTML web page button

I have a small webpage as example that looks like the one below. I have a certain number of users who can use that application and I would like to have the possibility for the user to upload one or more files to ShareSync on a specific folder.
The order of operation is therefore the following:
Take .pdf from Desktop-> open path using webpage button as shown -> access to ShareSync specific folder -> upload .pdf in that folder
Would that be possible?
Below the code I am using for far:
import React from 'react';
import { Card, CardImg, CardText, CardBody, CardTitle, CardSubtitle } from 'reactstrap';
import '../components/SideBar.css';
import { Link } from 'react-router-dom';
import example from '../documents/sample.zip';
import example2 from '../documents/example1.pdf';
class AtchafalayaButton extends React.Component {
render() {
return <DownloadLink src={example}>Download Project Specs</DownloadLink>;
}
}
class DownloadLink extends React.Component {
render() {
return (
<form method="get" action={this.props.src}>
<button type="submit" class="btn btn-primary mr-3">
{this.props.children}
</button>
</form>
);
}
}
const Sidebar = () => (
<div className="map-sidebar">
<Card className="mb-2">
<CardImg />
<CardBody>
<CardTitle>
<h3>Title</h3>
</CardTitle>
<CardSubtitle>Title Section</CardSubtitle>
<CardText>
<h6>Project Details</h6>
</CardText>
<div class="btn-toolbar">
<AtchafalayaButton />
</div>
</CardBody>
</Card>
What I have done so far:
1) I consulted file-saver but this does not seem to be what I want because the user has to upload a file into a folder and not download from the folder.
2) I dug into the problem and found this source and this one too. However they don't seem to address properly the problem I have.
3) I stepped back and tried to look at something less advanced but with more explanation on how to do that and found this basic example which sort of helps me but it is mostly aimed at downloading and not at uploading a file to a specific location.
4) After digging more I came across this other source from which it is not clear if this operation is possible.
Please point to the right direction as I am running out of ideas and options on how to solve this problem.

How do I display a button which direct me to a search page instead of displaying a hyperlink?

Hello dear colleagues,
I have a question based on a project I'm doing in a course I'm rolled.
All of my code is practicaly build, the only thing that I'm with difficulties to implement is a button which I have to display and by clicking this button it'll take me to a search page. I've implemented the link, which appears as a hyperlink in the main page, but it'd be in place of this hyperlink the button.
My main page is displaying the hyperlink like this (note the hyperlink in the bottom of the page at the right side):
Main Page With Hyperlink
But, according to the project requirements, the main page would display the button like this (with functionallity to take me to the search page, as the hyperlink does):
Main Page With Button Displayed
Below I show to you part of the codes I've done for the components:
Part of App.js code:
The beggining of the code:
import React from 'react';
import { Route } from 'react-router-dom';
import Home from './Home';
import Search from './Search';
import * as BooksAPI from './BooksAPI';
import './App.css';
class BooksApp extends React.Component {
state = {
books: []
}
The part with the Route:
render() {
return (
<div className="app">
<Route exact path="/" render={() => (
<Home
books={this.state.books}
changeShelf={this.changeShelf}
/>
)} />
<Route path="/search" render={() => (
<Search
changeShelf={this.changeShelf}
books={this.state.books}
/>
)} />
Part of main page code (Home.js):
The beggining of the code:
import React, {Component} from 'react';
import { Link } from 'react-router-dom';
import Book from './Book';
class Home extends Component {
The part which displays the link instead of the button:
<div className="open-search">
<Link to="/search">
Add a book
</Link>
</div>
So, I'd need some clarity here, what am I doing wrong in this code?
Please, if you'll need other code parts, please tell me that I put here, but I think these parts are enough for you to help me.
Regards.

You need to wrap your button in Link. See below.
<div className="open-search">
<Link to="/search">
<YourButtonComponent/>
</Link>
</div>
By doing this <YourButtonComponent/> is acting the same way that the text Add a Book does. It's wrapped in Link, so clicking on the <YourButtonComponent/> is the same as clicking the Link.

How to use Icons like Font Awesome in Gatsby

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!!