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>
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