Searching....
Search Results
Font Awesome Circle Dot Icon (Marker, Point, Location)
The Font Awesome Circle Dot Icon is used indicate Marker, Point, Location. This icon has 2 version: fa-solid fa-circle-dot for version 6 and fa-regular fa-circle-dot for version 6. It used represents a Bullet point.You can also edit this circle dot icon color, font size, animations by using Tryit editor.
Fontawesome Version 6.X
circle dot
Web
<i class='fa-solid fa-circle-dot'></i> React
<FontAwesomeIcon icon="fa-solid fa-circle-dot" /> Vue
<font-awesome-icon icon="fa-solid fa-circle-dot" /> circle dot
Web
<i class='fa-solid fa-circle-dot' style='color: white'></i> React
<FontAwesomeIcon icon="fa-solid fa-circle-dot" style={{color: 'white'}} /> Vue
<font-awesome-icon icon="fa-solid fa-circle-dot" :style="{color: 'white'}" /> circle dot
Web
<i class='fa-solid fa-circle-dot' style='color: red'></i> React
<FontAwesomeIcon icon="fa-solid fa-circle-dot" style={{color: 'red'}} /> Vue
<font-awesome-icon icon="fa-solid fa-circle-dot" :style="{color: 'red'}" /> circle dot
Web
<i class='fa-solid fa-circle-dot' style='color: blue'></i> React
<FontAwesomeIcon icon="fa-solid fa-circle-dot" style={{color: 'blue'}} /> Vue
<font-awesome-icon icon="fa-solid fa-circle-dot" :style="{color: 'blue'}" /> circle dot
Web
<i class='fa-solid fa-circle-dot' style='color: #f3da35'></i> React
<FontAwesomeIcon icon="fa-solid fa-circle-dot" style={{color: '#f3da35'}} /> Vue
<font-awesome-icon icon="fa-solid fa-circle-dot" :style="{color: '#f3da35'}" /> FA Regular circle dot Version 6.X
px Enter Size
Color Code
How to add Font Awesome circle dot Icon ?
Font Awesome Icon fa solid fa circle dot 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 circle dot
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<i class='fa-solid fa-circle-dot'></i>
</body>
</html> Tags
Marker,Point,Location,Target,Navigation
Change Font Awesome Icon Circle dot 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='fa-solid fa-circle-dot blue-color'></i>
<i class='fa-solid fa-circle-dot green-color'></i>
<i class='fa-solid fa-circle-dot teal-color'></i>
<i class='fa-solid fa-circle-dot yellow-color'></i>
<i class='fa-solid fa-circle-dot red-color'></i>
Note- Make Sure You have included the below Font Awesome file in header-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
Advertisements
Advertisements