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>
Output of the above example will be as below- 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">
Box Icon Font Awesome - FAQs
⭐What is the Font Awesome Box Icon code?Icon Code is - fas fa-box.
⭐ What does the fas fa-box Icon mean?fas fa-box is the Icon code of Font Awesome Box.
⭐ Can we add fas fa-box Icon in different sizes?Yes, you can Icon of fas fa-box in various pixels.
⭐ How to add a Blue color Font Awesome Box Icon?Add the blue color Box icon of the font awesome by using code: fas fa-box style='color: blue;'.
⭐ How to make white color icon of a Font Awesome Box?To change the Box icon to white color use code: fas fa-box style='color: white;'.
Advertisements
Advertisements