"Circle: Centered Icon"
Bootstrap 4.1.1 Snippet by divyalahad

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="circle">
<svg class="circle-icon" viewBox="0 0 24 24" width="24" height="24">
<line x1="2" x2="22" y1="5" y2="5" stroke-width="3" stroke-linecap="round"/>
<line x1="2" x2="22" y1="12" y2="12" stroke-width="3" stroke-linecap="round"/>
<line x1="2" x2="22" y1="19" y2="19" stroke-width="3" stroke-linecap="round"/>
</svg>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.circle {
background: #456BD9;
border-radius: 50%;
color: #fff;
height: 5em;
position: relative;
width: 5em;
}
.circle-icon {
fill: currentColor;
height: 50%;
left: 50%;
position: absolute;
stroke: currentColor;
stroke-width: 0;
top: 50%;
transform: translate(-50%, -50%);
width: 50%;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard Pro
Bootstrap 4 navbar with centered logo
loading circle
Sonar Wave Effect in Circle With CSS

Questions / Comments: