Website tips and tricks
Here you will learn modern web development tips and tricks We will see below topics.Centering things
You can use flex box to center the things. Below css applied on flex parent element will center all child element content.
justify-content: center; /* horizontally center */
align-items: center; /* vertically center */
If you are using grid, you can use below css to do the same thing.Fixed position Elements
You can use position fixed to fix the element on page.Icons
There are several options when it comes to add icons to website. But the one I like is font awesome. Follow below steps to add icons from fontawesome in react or nextjs project.- Install the dependencies for free icons
- Create a library of icons
- Use icons
Install dependencies
npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons
Create a library
This is a IconLib.js
import { library } from '@fortawesome/fontawesome-svg-core';
import { faImages, faHouseUser,faHouse } from '@fortawesome/free-solid-svg-icons';
import {
faGithubAlt,
faGoogle,
faFacebook,
faTwitter
} from '@fortawesome/free-brands-svg-icons';
library.add(
faImages,
faHouse,
faGithubAlt,
faGoogle,
faFacebook,
faTwitter,
faHouseUser
);
Use icons
Import the library and fa module in component.
import '../components/IconLib'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
Then you can use it in your component.
<li><FontAwesomeIcon icon={['fas', 'house']} /></li>
<li><FontAwesomeIcon icon={['fas', 'images']} /></li>
You can also add color and size using below syntax.
<FontAwesomeIcon icon={['fab', 'twitter']} size='4x' style={{color:'lightblue'}} />
<FontAwesomeIcon icon={['fab', 'facebook']} size='4x' style={{color:'navy'}} />