Icon Buttons 2.8
Toggle example guides Toggle HTML markup
Icon buttons are enhanced buttons with an icon. They are designed mainly to be used on content pages to drive traffic to primary pathways.
When to use: Some guidence on when to use.
When not to: Some guidence on when it is not the best choice.
Notes: Requires FontAwesome
<!-- Full Width -->
<div class="row">
<div class="col-md">
<a href="#" class="cot-button">
<span class="cot-button-icon">
<i class="fa fa-edit" aria-hidden="true"></i>
</span>
<span class="cot-button-text">
Full Width
</span>
</a>
</div>
</div>
<!-- Two column -->
<div class="row">
<div class="col-md-6">
<a href="#" class="cot-button">
<span class="cot-button-icon">
<i class="fa fa-comments" aria-hidden="true"></i>
</span>
<span class="cot-button-text">
Button
</span>
</a>
</div>
<div class="col-md-6">
<a href="#" class="cot-button">
<span class="cot-button-icon">
<i class="fa fa-comments" aria-hidden="true"></i>
</span>
<span class="cot-button-text">
Button with overflowing text way too much
</span>
</a>
</div>
</div>
Source:
src/scss/base/_buttons.scss
, line 219