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.
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.
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
I want to change menu-pages (in react-router) with to icons ("back", "forward")...
export const ArrowNav = () => {
const menu = useContext(menuContext);
return <div className="lmpixels-arrows-nav">
<NavLink to={"/about"}>
<div className="lmpixels-arrow-right">
<i className="lnr lnr-chevron-right"/>
</div>
</NavLink>
<NavLink to="/resume">
<div className="lmpixels-arrow-left">
<i className="lnr lnr-chevron-left"/>
</div>
</NavLink>
</div>
}
Instead of using html css styles to show the icons you might like to try the package React Icons:
https://react-icons.github.io/
I, particularly, avoid using old CSS style names for icons like you are trying to do. In fact, I prefer to do all I can do to avoid the use of CSS files with React. Because React uses a lot js objects I believe it is better practice the use of some kind of CSS objects:
https://www.w3schools.com/react/react_css.asp
The error you are getting might depend on how are you importing the needed css information.
More info you might find useful:
https://medium.com/swlh/using-react-router-navlink-to-specify-the-active-element-in-a-navigation-bar-38700ffd4900
Hope this will help you
I have an SVG in a folder icon.svg, I'm trying to render it in a button along with text. Specifically, it's the Google icon and i'm trying to render it next to some text that says "SIGN IN WITH GOOGLE"
I'm importing the SVG as is and trying to pass it next to the button but, the file path is rendering instead:
function App() {
return (
<div className="App">
<button>{SVG}SIGN IN WITH GOOGLE</button>
</div>
);
}
That renders a button that says /static/media/Icon.a1611096.svgSIGN IN WITH GOOGLE
How is one supposed to render the icon inside the button properly?
EDIT: I've been messing with the icon and the button and got close:
https://codesandbox.io/s/10k7rr3rp4
First you have to save the icon in assets folder. Then import it into the component which you want to use in
import {ReactComponent as Logo} from '../../assets/google.svg';
Now you can use it like a component
<button>
<Logo className='logo' /> Sign in with Google
</button>
You can use the require function as follows:
<button><img src={require(SVG)} alt="test" />SIGN IN WITH GOOGLE</button>
another solution could be to use styled-components with ::before pseudo element.
i just moved the images folder to the public folder.
live example
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!!