Searching....
Search Results
Font Awesome Box (Square, Design)
Font Awesome provides box icon, symbol of boxed, parcel, or package. The box icon can be useful for adding some functionality to your website or app, such as shipping, delivery, or tracking. In this tutorial, we will learn how to use the Font Awesome box icon, which is also known as Fa Fa box, Square, Design.
Fontawesome Version 5.X
box
<i class='fas fa-box'></i> box
<i class='fas fa-box' style='color: white'></i> box
<i class='fas fa-box' style='color: red'></i> box
<i class='fas fa-box' style='color: blue'></i> box
<i class='fas fa-box' style='color: #f3da35'></i> Fontawesome Version 6.X
box
Web
<i class='fa-solid fa-box'></i> React
<FontAwesomeIcon icon="fa-solid fa-box" /> Vue
<font-awesome-icon icon="fa-solid fa-box" /> box
Web
<i class='fa-solid fa-box' style='color: white'></i> React
<FontAwesomeIcon icon="fa-solid fa-box" style={{color: 'white'}} /> Vue
<font-awesome-icon icon="fa-solid fa-box" :style="{color: 'white'}" /> box
Web
<i class='fa-solid fa-box' style='color: red'></i> React
<FontAwesomeIcon icon="fa-solid fa-box" style={{color: 'red'}} /> Vue
<font-awesome-icon icon="fa-solid fa-box" :style="{color: 'red'}" /> box
Web
<i class='fa-solid fa-box' style='color: blue'></i> React
<FontAwesomeIcon icon="fa-solid fa-box" style={{color: 'blue'}} /> Vue
<font-awesome-icon icon="fa-solid fa-box" :style="{color: 'blue'}" /> box
Web
<i class='fa-solid fa-box' style='color: #f3da35'></i> React
<FontAwesomeIcon icon="fa-solid fa-box" style={{color: '#f3da35'}} /> Vue
<font-awesome-icon icon="fa-solid fa-box" :style="{color: '#f3da35'}" /> How to add Font Awesome box Icon ?
Font Awesome Icon fas fa box Icon can be added to any web page simply as below. You can integrate Icon in web pages by just adding following below syntax & icon code.
HTML Code
Get complete html code for icon box
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<i class='fas fa-box'></i>
</body>
</html> Tags
Package,Parcel,Boxed
Change Font Awesome Icon Box Color
Sometimes we need icons in different color, as we suggested by adding css style we can change color. Here we have created one example to change color of icons with css classes.
<style>
.blue-color {
color:blue;
}
.green-color {
color:green;
}
.teal-color {
color:teal;
}
.yellow-color {
color:yellow;
}
.red-color {
color:red;
}
</style>
<i class='fas fa-box blue-color'></i>
<i class='fas fa-box green-color'></i>
<i class='fas fa-box teal-color'></i>
<i class='fas fa-box yellow-color'></i>
<i class='fas fa-box red-color'></i>
Note- Make Sure You have included the below Font Awesome file in header-
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
Advertisements
Advertisements