Skip to content

Beautiful Canoe Brand Guidelines

Icons

brand.beautifulcanoe.com

Icons¶

Beautiful Canoe uses https://fontawesome.com/ icons, version 5 or above.

License¶

The free Font Awesome set is licensed by the CC By 4.0 License.

Load icons¶

To load Font Awesome icons, include the following in the <head> of your HTML page:

<!-- Latest Font Awesome kit. -->
<script src="https://kit.fontawesome.com/36462bdc6f.js"></script>

Styling icons¶

Icons should be styled in the primary brand colour, similarly to this:

.icon-container {
    font-size: 2em;
    display: flex;
    text-align: center;
    vertical-align: middle;
}

i.fas {
    color: $primary;
    height: 2em;
    width: 2em;
    padding: 5px;
    margin: 5px;
    line-height: inherit;
}

i.fas:hover {
    background: $primary;
    color: $white;
}

Using an icon in HTML¶

<div class="icon-container">
    <i class="fas fa-ICON-NAME fa-1x" title="TITLE"></i>
</div>

Value and attitude icons¶

The standard set of icons for the Beautiful Canoe attitudes and values can be viewed / downloaded from the Font Awesome site:

Values¶

Attitudes¶