I'm new in CSS and I'm trying to add status icon on my HTML page which will gets updated based on continuous AJAX call data from web server.
AJAX response will be JSON object:
// In case of Success
{
status: 0,
message: 'Success'
}
// In case of Error
{
status: 1,
message: 'Error'
}
// In case of Server is Busy
{
status: 2,
message: 'Busy'
}
I tried to created sample using MS Paint software, I want to display something like below on my page.
How do I place circle on database icon using CSS?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
<i class="fa fa-database" aria-hidden="true"></i>
<i class="fa fa-circle text-danger" aria-hidden="true"></i> Down
</div>
</body>
</html></div>
