Iconography
Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.
Icons
<a class="btn-animated-border animated-prev">
<svg width="52" height="52" viewBox="0 0 52 52">
<circle cx="26" cy="26" r="25" fill="none" stroke="#ff8300" stroke-width="1.2"></circle>
</svg>
<i class="fas fa-long-arrow-left"></i>
</a>
<a class="btn-animated-border animated-prev">
<svg width="52" height="52" viewBox="0 0 52 52">
<circle cx="26" cy="26" r="25" fill="none" stroke="#ff8300" stroke-width="1.2"></circle>
</svg>
<i class="fas fa-angle-left"></i>
</a>
.btn-animated-border {
display: inline-block;
text-align: center;
position: relative;
line-height: 52px;
width: 52px;
height: 52px;
border-radius: 26px;
background: transparent;
border: 0;
cursor: pointer;
margin-right: 10px;
margin-bottom: 10px;
&:before {
content: '';
position: absolute;
width: 52px;
height: 52px;
top: 0;
left: 0;
border-radius: 26px;
border: 1px solid #E9EFF4;
z-index: 0;
transition: border-color .8s cubic-bezier(.165,.84,.44,1) 0s;
}
&.animated-prev {
&:hover
svg {
circle {
stroke-dashoffset: 0
}
}
}
}
&.animated-next {
&:hover
svg {
circle {
stroke-dashoffset: 314.16
}
}
}
}
svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(-90deg);
z-index: 1;
circle {
stroke-dasharray: 157.08;
stroke-dashoffset: 157.08;
transition: stroke-dashoffset .8s cubic-bezier(.165,.84,.44,1) 0s;
}
}
i {
color: #7C8C9C
}
}
Icons
<a class="btn-animated-border animated-prev">
<svg width="52" height="52" viewBox="0 0 52 52">
<circle cx="26" cy="26" r="25" fill="none" stroke="#ff8300" stroke-width="1.2"></circle>
</svg>
<i class="fas fa-long-arrow-left"></i>
</a>
<a class="btn-animated-border animated-prev">
<svg width="52" height="52" viewBox="0 0 52 52">
<circle cx="26" cy="26" r="25" fill="none" stroke="#ff8300" stroke-width="1.2"></circle>
</svg>
<i class="fas fa-angle-left"></i>
</a>
.btn-animated-border {
display: inline-block;
text-align: center;
position: relative;
line-height: 52px;
width: 52px;
height: 52px;
border-radius: 26px;
background: transparent;
border: 0;
cursor: pointer;
margin-right: 10px;
margin-bottom: 10px;
&:before {
content: '';
position: absolute;
width: 52px;
height: 52px;
top: 0;
left: 0;
border-radius: 26px;
border: 1px solid #E9EFF4;
z-index: 0;
transition: border-color .8s cubic-bezier(.165,.84,.44,1) 0s;
}
&.animated-prev {
&:hover
svg {
circle {
stroke-dashoffset: 0
}
}
}
}
&.animated-next {
&:hover
svg {
circle {
stroke-dashoffset: 314.16
}
}
}
}
svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(-90deg);
z-index: 1;
circle {
stroke-dasharray: 157.08;
stroke-dashoffset: 157.08;
transition: stroke-dashoffset .8s cubic-bezier(.165,.84,.44,1) 0s;
}
}
i {
color: #7C8C9C
}
}