Who can help me with this. I need this icons from material ui but I can't find info how I can make it
First of all you have to import the icon in your component then you can use the following code as example:
import FacebookIcon from "#material-ui/icons/Facebook";
const YourComponent = () => (
<div>
<span>...some other content</span>
<FacebookIcon />
</div>
);
export default YourComponent;
If you need to have also a background for your image you can do something like that:
<div style={{ backgroundColor: "#1877d1", padding: "1rem", display: "inline-block" }}>
<FacebookIcon />
</div>
So you need to wrap the icon in a div with a stile.
You can install Material-UI Icons
with npm : npm install #material-ui/icons
with yarn : yarn add #material-ui/icons
and import material-UI icons : link
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 started yesterday with Ant Design in a Gatsby project. I want to make a carousel and tried using the Ant Design component for this. Ant Design Carousel. This shows this result:
The blue things are the carousel, but instead the 4 I have in my code, I have 9 blue spaces on screen. I don't understand where these come from.
When I click the buttons 2/3/4 below, all blue spaces disappear. When I click on button 1 they all reappear.
My imports and code:
import * as React from "react";
import { Row, Col, Image, Table, Carousel } from 'antd';
<Carousel afterChange={onChange}>
<div>
<h3 style={contentStyle}>1</h3>
</div>
<div>
<h3 style={contentStyle}>2</h3>
</div>
<div>
<h3 style={contentStyle}>3</h3>
</div>
<div>
<h3 style={contentStyle}>4</h3>
</div>
</Carousel>
function onChange(a, b, c) {
console.log(a, b, c);
}
const contentStyle = {
height: '160px',
color: '#fff',
lineHeight: '160px',
textAlign: 'center',
background: '#364d79',
};
All help is appreciated.
It's because you haven't included the CSS stylesheet. Make sure you add the styles using following import:
import 'antd/dist/antd.css'
If you're using Gatsby.js, you can add it in your gatsby-browser.js file. If the file doesn't exist, you can create one in your root directory (the same where your package.json is).
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 am trying to build a music tour website using React material-ui.
I woul like the website to look like this one: https://www.oddfantastic.com/
I am new to React and after looking to libraries such as bootstrap and material-ui and decided to stick to material-ui. Right now I'm stuck on the first page with the sliding images. I tried different ways to obtain the result of the first page of the above website but no luck until now.
I started using grid and cards, and now I am trying grid list. Here is my code:
import Slide from '#material-ui/core/Slide';
import React, { Component } from 'react'
import { Grid, Card, CardContent, CardMedia, Typography } from '#material-ui/core';
import GridList from '#material-ui/core/GridList';
import GridListTile from '#material-ui/core/GridListTile';
import { Carousel, CarouselSlide } from 'material-ui-carousel'
export default class App extends Component {
pictures = [
{imagel: './images/radio7-2-1.png', imager: './images/radio7-2-2.png', title: 'r7-2'},
{imagel: './images/radio7-3-1.png', imager: './images/radio7-3-2.png', title: 'r7-3'},
{imagel: './images/masterphil-1.png', imager: './images/masterphil-2.png', title: 'mp'},
{imagel: './images/vito-1.png', imager: './images/vito-2.png', title: 'vito'},
];
render () {
return (
// <Grid container justify="center" spacing={0}>
/* {[0, 1].map(value => (
<Grid key={value} item> */
<Carousel>
{this.pictures.map(({ imagel, imager, title }) => (
<CarouselSlide key={title}>
<GridList cellHeight={160} cols={2}>
<GridListTile key={title} style={{ height: 'auto' }}>
<img src={imagel} alt={title} />
</GridListTile>
</GridList>
{/* <Card width="100%" key={title}>
<CardMedia
image={imagel}
title={title}
style={{
height: 0,
width: '50%',
paddingTop: '75%',
}}
/>
<CardMedia
image={imager}
title={title}
style={{
height: 0,
width: '50%',
paddingTop: '75%',
}}
/>
<CardContent>
<Typography>{title}</Typography>
</CardContent>
</Card> */}
</CarouselSlide>
))}
</Carousel>
/* </Grid>
))}
</Grid> */
)
}
}
Here is the obtained result:
It looks like all the images appear at the same time.
Since my knowledge is really really limited, I am wondering if I chose the right library. Especially that I couldn't find a material-ui component allowing to achieve what I want.
Any advice or direction would be great.
Thanks
The MUI official doc consists of an example of using Carousel Effect.
The example can be found here
The demo uses react-swipeable-views to create a carousel.
I think you are looking for this package which is an extendible Carousel UI component using Material-UI. Happy Coding!
Material UI doesn’t have a native Carousel component btw and I find Material UI customization very challenging for beginners. After trying many carousel libraries recently, I found the ant design has the best ready-to-use carousel. The library is developed and maintained by Alibaba group, so you can rely on it better than some small libraries.
if someone still stacked in this, just use this:
npm install react-material-ui-carousel --save
you should install also:
npm install #mui/material
npm install #mui/icons-material
npm install #mui/styles
import Carousel from 'react-material-ui-carousel';
<Carousel>
{
this.props.item.images.map( (image, i) => <img key={i} src={image} /> )
}
</Carousel>
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!!