I have created Card component using .jsx file and loaded in a .js file. And it is working. Here I want to know, how to add social media icons to the card?
This is for a new React project, hope to run mongodb. I have tried using this
npm install -g bower
bower install bootstrap-social.
But did not work.
const Card = props=>{
return(
<div className="card text-center shadow">
<div className="overflow">
<img src={props.imgsrc} alt='image 1' className="card-img-top" />
</div>
<div className="card-body text-dark">
<h4 className="card-title">{props.title} </h4>
<p className="card-text text-secondary">
Lorem ipsum dolor sit amet consectetur,
</p>
**Go Anywhere**
</div>
</div>
);
};
I expected to change above "Go Anywhere" button to twitter button. And to put some other buttons like Facebook, Instagram and so on in the same row.
you can use React Iconsenter code here
it comprises of a bunch of icons from font-awesome, material design etc
npm install react-icons
OR
yarn add react-icons
then import your favourite icons e.g
import {FaTwitter} from 'react-icons/fa'
you can browse a bunch of several icons at:
https://react-icons.github.io/react-icons/
You can install any icon library having social icons. You need to do:
npm install react-feather --save( run from the project folder )
import { IconName } from 'react-feather';
Link for react-feather: https://github.com/feathericons/react-feather
Hope this helps!
you can use webpack-webfont and convert svg custom icons to webfont
you can download icons from flaticon.com
Related
In my React application I am using storybook and for this I have integrated chromatic where all my images are published and stored.
But for specific stories my images are missing when build pushed to Chromatic (see screenshot below for missing image):
You can see above missing images in chromatic build.
I can disabled lazy=loading in my specific component:
My component code below:
<div className="flex-grow px-6 place-self-center">
<div className="h-60 ">
<img
src={imageUrl}
className="px-6 pt-4 pb-10 my-0"
height={imageHeight}
loading="lazy" // here I can remove this line
/>
</div>
But I want to disabled lazy loading only for storybook/stories or better for Chromatic only.
I am trying to add the google material design icon in my one of the react component.
The following is the code snippet
const socialMedia = (
<div className="columns is-centered footer-colmns sub-footer">
<div className="column is-one-quarter">
<h1>Wir sind auf diesen Kanälen vertreten</h1>
<span>
{"Youtube Icon"},
{/MenuIcon},
{" | "}
</span>
<span>
{"Facebook Icon"},
{" | "}
</span>
<span>
<span>
{"XING Icon"},
{" | "}
</span>
</span>
</div>
</div>
);
Try installing the following package:
// with npm
npm install #material-ui/icons
// with yarn
yarn add #material-ui/icons
Then import the icons:
import { Facebook, YouTube } from '#material-ui/icons';
Next, replace the following line of your code
<span>
{"Youtube Icon"},
{/MenuIcon},
{" | "}
</span>
with
<span>
<YouTube/>,
... //rest of the icons
</span>
Replace the rest in a similar fashion
there is no need to write the icons in curly brasis.. just write down as a tag like
<YouTube/>
<Facebook/>
<XING/>
Good Luck..
Note: Please don;t forget to install and import material UI Icons library
I have created a react project using following command:
npx create-react-app project
I have installed bootstrap 4.3.1 using npm command and I have also imported bootstrap into the index.js file
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
But for some reason it is not displaying icons.
export class Navbar extends Component {
render() {
return (
<div>
<nav className="navbar navbar-light bg-dark mb-5">
<div className="container">
<div className="navbar-header">
<a className="navbar-brand text-white text-lg brand-text" to="/">
MovieSeriesInfo</a>
</div>
<ul className="navbar-nav ml-auto text-light d-inline-block">
<li className="nav-item d-inline-block mr-4">
<i className="fab fa-imdb fa-5x" id="imdb-logo" />
</li>
<li className="nav-item d-inline-block mr-4">
<i className="fab fa-react fa-5x" id="react-logo" />
</li>
</ul>
</div>
</nav>
</div>
)
}
}
export default Navbar;
First, you should install "bootstrap-icons" npm package:
npm install bootstrap-icons
Then, import "bootstrap-icons.css" in your index.js file:
import "bootstrap-icons/font/bootstrap-icons.css";
You need to install font-awesome and import the same,
npm install font-awesome --save
import in index.js file
import 'font-awesome/css/font-awesome.min.css';
For more on how to use font-awesome icons see this.
As far as I know Bootstrap 4.* doesn't support Glyphicon natively, so you should use an alternative, or downgrade to bootstrap 3.* which is not recommended. Fontawesome.com is an option.
I know this question has an accepted answer, but it's for others who did the same mistake as I did. Add this <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css" rel="stylesheet"> tag in index.html, it has the web fonts cdn link. It's given in bootstrap's usage to add this link for icon fonts. Don' just install and the <i> tag. I found it here
I'm very new to reactjs. There is a third-party library called react-bootstrap that I want to use in my project. I installed it via yarn and when I want to use it's components, nothing happens! For example:
import { Button } from 'react-bootstrap'
<Button variant="success">Sign In</Button>
has no effect on a button. In elements I can see that the class assigned:
<button type="button" class="btn btn-success">Sign In</button>
but there isn't any effect in button!! What should I do?
If you need any clarification, simply ask for it. Thank you!
You need to add bootstrap.css, either by adding link in index.html
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
or by importing in index.js file after installing bootstrap using yarn / npm.
import 'bootstrap/dist/css/bootstrap.min.css';
Demo
Currently working on a group project for class. It's using React and MaterializeCss on the front.
I'm trying to add icons, for example, on the login screen I have a little person icon next to the username input field, but it just displays "ACCOUNT_USER" or on the send button, I want to show an icon called send but it just displays "SEND". Here's a code example.
<div className="row">
<div className="input-field col s6 offset-m3">
<i className="material-icons prefix">account_circle</i>
<input id="username" type="text" className="validate" />
<label htmlFor="username">Username</label>
</div>
Before anyone tells me to use include the CDN line from https://materializecss.com/getting-started.html , I already have.
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
Does anyone have any idea what could be the problem then? The program currently runs locally hosted, and I read that could be a problem with materialize, and the only apparent solution I found so far is to download the icons package from google, but that would be silly to download 91k icon files for a program no? Hopefully there's a better solution
How to use materialize-css with React with icons and other js features
yarn add materialize-css#next --save or npm install materialize-css#next --save
yarn add install material-icons or npm install material-icons
3.Kindly import the following like this ; snap
import 'materialize-css/dist/css/materialize.min.css';
import 'materialize-css/dist/js/materialize';
import 'material-icons/iconfont/material-icons.css'