Searching....
Search Results
Font Awesome Info Circle(i) - Information, Details, About, Description
Font Awesome Info Circle Icon refers to used to display a snippet of helpful text without taking users off their current screen. Its icon is also known as fa-info-circle. This font awesome icon is also known as "fa-Info Circle" or "fa fa Info Circle".
Fontawesome Version 4.X
info circle
<i class='fa fa-info-circle'></i> info circle
<i class='fa fa-info-circle' style='color: white'></i> info circle
<i class='fa fa-info-circle' style='color: red'></i> info circle
<i class='fa fa-info-circle' style='color: blue'></i> info circle
<i class='fa fa-info-circle' style='color: #f3da35'></i> Fontawesome Version 5.X
info circle
<i class='fas fa-info-circle'></i> info circle
<i class='fas fa-info-circle' style='color: white'></i> info circle
<i class='fas fa-info-circle' style='color: red'></i> info circle
<i class='fas fa-info-circle' style='color: blue'></i> info circle
<i class='fas fa-info-circle' style='color: #f3da35'></i> How to Add Font Awesome Information Icon to HTML Code?
Font Awesome Icon fa fa info circle 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 info circle
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
</head>
<body>
<i class='fa fa-info-circle'></i>
</body>
</html> Tags
message, data, knowledge, wisdom, acquired facts, lore, report, tidings, word, news and info.,Information Icon,Details,About,Report,More,I icon,description ,Title
Change Font Awesome Icon Info circle 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 fa-info-circle blue-color'></i>
<i class='fa fa-info-circle green-color'></i>
<i class='fa fa-info-circle teal-color'></i>
<i class='fa fa-info-circle yellow-color'></i>
<i class='fa fa-info-circle 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/4.7.0/css/font-awesome.min.css'>
Advertisements
Advertisements