City of Tampa Style Guide

Icon Buttons 2.8

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

<insert-markup>components.iconbuttons-</insert-markup>

Full Width

Button

Button with overflowing text way too much

<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>

<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