1. First, we need fresh reactjs setup, and for that, we need to run below commands into out terminal, and also we should have latest node version installed on our system:
npx create-react-app my-awesome-project
cd my-awesome-project
npm start
2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:
npm install [email protected] --save
npm start //For start project again
3. Finally for the main output, we need to add below code into our my-awesome-project/src/App.js file or if you have fresh setup then you can replace my-awesome-project/src/App.js file code with below code:
import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div>
<script src="https://use.fontawesome.com/cb2d0db4c2.js"></script>
<div class="container">
<div class="row">
<div class="col-md-10 icons-container">
<ul class="row text-center">
<a href="" >
<li id="coffee-circle" >
<span>
<i class="fa fa-coffee fa-4x" id="coffee-icon">
</i>
<b class="icon-description">
Coffee
</b>
</span>
</li>
</a>
<a href="">
<li id="cog-circle">
<span>
<i class="fa fa-cog fa-4x" id="cog-icon">
</i>
<b class="icon-description">
Cog!!
</b>
</span>
</li>
</a>
<a href="">
<li id="upload-circle">
<span>
<i class="fa fa-upload fa-4x" id="upload-icon">
</i>
<b class="icon-description">
Upload
</b>
</span>
</li>
</a>
</ul>
</div>
<div class="col-md-4">
</div>
</div>
</div>
</div>
);
}
export default App;
4. Now we need to add below code into our my-awesome-project/src/App.css file :
.icons-container ul li {
display: inline-block;
width: 12.2em;
height: 12.2em;
border: 1px solid #ccc;
padding: 40px;
border-radius: 50%;
margin: 2.25em;
line-height: 3.5em;
color: #999;
transition: 1s 0s linear;
}
.change-color {
border-color: orange !important;
border: 4px solid orange !important;
color: orange !important;
}
.fa-coffee {
transition: 1s 0s linear;
}
.fa-cog {
transition: 1s 0s linear;
}
.fa-upload {
transition: 1s 0s linear;
}
.animate-coffee {
-moz-transform: scale(1.2) rotate(-45deg);
-webkit-transform: scale(1.2) rotate(-45deg);
-o-transform: scale(1.2) rotate(-45deg);
-ms-transform: scale(1.2) rotate(-45deg);
transform: scale(1.2) rotate(-45deg);
}
.animate-cog {
transform: scale(1.2);
}
.animate-upload {
-moz-transform: scale(1.2) translateY(-10px);
-webkit-transform: scale(1.2) translateY(-10px);
-o-transform: scale(1.2) translateY(-10px);
-ms-transform: scale(1.2) translateY(-10px);
transform: scale(1.2) translateY(-10px);
}