@fortawesome/free-solid-svg-icons#faShoppingBag JavaScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faShoppingBag.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Footer.js From amazon-next with MIT License | 5 votes |
|
export default function Footer() {
return (
<footer className="lg:hidden bg-white fixed bottom-0 right-0 w-full shadow-lg py-4 px-5">
<nav>
<ul className="flex flex-row w-full justify-between">
<li>
<Link href="/">
<>
<FontAwesomeIcon
icon={faClipboardList}
size="lg"
className="text-gray-800"
/>
</>
</Link>
</li>{' '}
<li>
<Link href="/cart">
<>
<FontAwesomeIcon
icon={faShoppingBag}
size="lg"
className="text-gray-800"
/>
</>
</Link>
</li>
<li>
<Link href="/likes">
<>
<FontAwesomeIcon
icon={faHeart}
size="lg"
className="text-gray-800"
/>
</>
</Link>
</li>
</ul>
</nav>
</footer>
);
}
Example #2
| Source File: LateralMenu.js From amazon-next with MIT License | 5 votes |
|
export default function LateralMenu() {
const productsAmount = useSelector(state => state.cart.products.length);
const likesAmount = useSelector(state => state.user.likedProducts.length);
return (
<div className="hidden py-8 lg:flex flex-col justify-between items-center h-full shadow-lg">
<Link href="/">
<img
src="/static/amazon.png"
alt="Amazon"
aria-label="Amazon"
className="w-8 h-8 mb-8 rounded-full cursor-pointer"
/>
</Link>
<nav>
<ul>
<nav>
<ul>
<li className="mb-8">
<Link href="/">
<div>
<FontAwesomeIcon
icon={faClipboardList}
size="lg"
className="text-gray-500 cursor-pointer transition-colors hover:text-gray-600 duration-500 ease-in-out"
/>
</div>
</Link>
</li>{' '}
<li className="mb-8 relative">
<Link href="/cart">
<div>
<FontAwesomeIcon
icon={faShoppingBag}
size="lg"
className="text-gray-500 cursor-pointer transition-colors hover:text-gray-600 duration-500 ease-in-out"
/>
</div>
</Link>
<div className="bg-yellow-burn flex items-center text-white font-bold w-4 h-4 rounded-full p-1 absolute top-0 left-60p text-2xs">
{productsAmount}
</div>
</li>
<li className="mt-8 relative">
<Link href="/likes">
<div>
<FontAwesomeIcon
icon={faHeart}
size="lg"
className="text-gray-500 cursor-pointer transition-colors hover:text-gray-600 duration-500 ease-in-out"
/>
</div>
</Link>
<div className="bg-yellow-burn flex items-center text-white font-bold w-4 h-4 rounded-full p-1 absolute top-0 left-60p text-2xs">
{likesAmount}
</div>
</li>
</ul>
</nav>
</ul>
</nav>
<img
src="/static/user.jpg"
alt="Profile"
className="w-8 h-8 rounded-full"
/>
</div>
);
}
Example #3
| Source File: App.js From commercejs-react-cart with BSD 3-Clause "New" or "Revised" License | 5 votes |
|
library.add(faShoppingBag, faTimes)
Example #4
| Source File: CartNav.js From commercejs-react-cart with BSD 3-Clause "New" or "Revised" License | 5 votes |
|
library.add(faShoppingBag, faTimes);
Example #5
| Source File: App.js From commercejs-react-checkout with BSD 3-Clause "New" or "Revised" License | 5 votes |
|
library.add(faShoppingBag, faTimes)
Example #6
| Source File: CartNav.js From commercejs-react-functional with BSD 3-Clause "New" or "Revised" License | 5 votes |
|
library.add(faShoppingBag, faTimes);
