Searching....
Search Results
Font Awesome Dice Icon (Probability, Chance, Random)
The Font Awesome Dice icon is used indicate Probability, Chance, Random. This icon has 2 version : fas fa-dice for version 5 and fa-solid fa-dice for version 6. It use represents to a small square object with a different number of dots (from one to six) on each side, used in some games. If you want to edit or customize this Fa dice icon, utilize the 'Try It' editor to change its color, size, and animation.
Fontawesome Version 5.X
dice
<i class='fas fa-dice'></i> dice
<i class='fas fa-dice' style='color: white'></i> dice
<i class='fas fa-dice' style='color: red'></i> dice
<i class='fas fa-dice' style='color: blue'></i> dice
<i class='fas fa-dice' style='color: #f3da35'></i> Fontawesome Version 6.X
dice
Web
<i class='fa-solid fa-dice'></i> React
<FontAwesomeIcon icon="fa-solid fa-dice" /> Vue
<font-awesome-icon icon="fa-solid fa-dice" /> dice
Web
<i class='fa-solid fa-dice' style='color: white'></i> React
<FontAwesomeIcon icon="fa-solid fa-dice" style={{color: 'white'}} /> Vue
<font-awesome-icon icon="fa-solid fa-dice" :style="{color: 'white'}" /> dice
Web
<i class='fa-solid fa-dice' style='color: red'></i> React
<FontAwesomeIcon icon="fa-solid fa-dice" style={{color: 'red'}} /> Vue
<font-awesome-icon icon="fa-solid fa-dice" :style="{color: 'red'}" /> dice
Web
<i class='fa-solid fa-dice' style='color: blue'></i> React
<FontAwesomeIcon icon="fa-solid fa-dice" style={{color: 'blue'}} /> Vue
<font-awesome-icon icon="fa-solid fa-dice" :style="{color: 'blue'}" /> dice
Web
<i class='fa-solid fa-dice' style='color: #f3da35'></i> React
<FontAwesomeIcon icon="fa-solid fa-dice" style={{color: '#f3da35'}} /> Vue
<font-awesome-icon icon="fa-solid fa-dice" :style="{color: '#f3da35'}" /> How to add Font Awesome dice Icon ?
Font Awesome Icon fas fa dice 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 dice
<!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-dice'></i>
</body>
</html> Tags
Probability,Chance,Random
Change Font Awesome Icon Dice 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-dice blue-color'></i>
<i class='fas fa-dice green-color'></i>
<i class='fas fa-dice teal-color'></i>
<i class='fas fa-dice yellow-color'></i>
<i class='fas fa-dice 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">
Dice Icon Font Awesome - FAQs
⭐What is the Font Awesome Dice Icon code?Icon Code is - fas fa-dice.
⭐ What does the fas fa-dice Icon mean?fas fa-dice is the Icon code of Font Awesome Dice.
⭐ Can we add fas fa-dice Icon in different sizes?Yes, you can Icon of fas fa-dice in various pixels.
⭐ How to add a Blue color Font Awesome Dice Icon?Add the blue color Dice icon of the font awesome by using code: fas fa-dice style='color: blue;'.
⭐ How to make white color icon of a Font Awesome Dice?To change the Dice icon to white color use code: fas fa-dice style='color: white;'.
Advertisements
Advertisements