You can set the color and size of the icon using the style attribute - for example:
<i class="fal fa-tools" style="font-size:2rem;color:#33333;"></i>Feather icons
| Icon | Code | Standard Use |
|---|---|---|
<img class="bcls-icon" src="/assets/images/feather/tool.svg"> |
Administration | |
 |
<img class="bcls-icon" src="/assets/images/feather/dollar-sign.svg"> |
Advertising |
<img class="bcls-icon" src="/assets/images/feather/bar-chart-2.svg"> |
Analytics | |
 |
<img class="bcls-icon" src="/assets/images/feather/settings.svg"> |
APIs |
 |
<img class="bcls-icon" src="/assets/images/feather/sunrise.svg"> |
Basics |
<img class="bcls-icon" src="/assets/images/feather/code.svg"> |
Code | |
 |
<img class="bcls-icon" src="/assets/images/feather/codepen.svg"> |
Code Solutions |
 |
<img class="bcls-icon" src="/assets/images/feather/smartphone.svg"> |
Create Mobile App |
 |
<img class="bcls-icon" src="/assets/images/feather/layout.svg"> |
Create a Web App |
 |
<img class="bcls-icon" src="/assets/images/feather/edit.svg"> |
Create App Design |
 |
<img class="bcls-icon" src="/assets/images/feather/zap.svg"> |
Create Experience |
 |
<img class="bcls-icon" src="/assets/images/feather/user-plus.svg"> |
Create Users |
 |
<img class="bcls-icon" src="/assets/images/feather/monitor.svg"> |
Creating Apps |
 |
<img class="bcls-icon" src="/assets/images/feather/arrow-up-right.svg"> |
Creating your Application |
|
<img class="bcls-icon" src="/assets/images/feather/layout.svg"> |
Create Playlist |
 |
<img class="bcls-icon" src="/assets/images/feather/list.svg"> |
Dashboard |
 |
<img class="bcls-icon" src="/assets/images/feather/filter.svg"> |
Data Collection |
 |
<img class="bcls-icon" src="/assets/images/feather/coffee.svg"> |
Design Considerations |
 |
<img class="bcls-icon" src="/assets/images/feather/git-merge.svg"> |
Delivery System |
 |
<img class="bcls-icon" src="/assets/images/feather/terminal.svg"> |
Developer |
 |
<img class="bcls-icon" src="/assets/images/feather/file-text.svg"> |
Documentation |
 |
<img class="bcls-icon" src="/assets/images/feather/fast-forward.svg"> |
Encoding Guides |
|
<img class="bcls-icon" src="/assets/images/feather/settings.svg"> |
Encoding Settings |
 |
<img class="bcls-icon" src="/assets/images/feather/alert-circle.svg"> |
Errors/Troubleshooting |
 |
<img class="bcls-icon" src="/assets/images/feather/external-link.svg"> |
External Link |
<img class="bcls-icon" src="/assets/images/feather/info.svg"> |
General Information | |
 |
<img class="bcls-icon" src="/assets/images/feather/play.svg"> |
Getting Started |
 |
<img class="bcls-icon" src="/assets/images/feather/arrow-right.svg"> |
Guides |
 |
<img class="bcls-icon" src="/assets/images/feather/map.svg"> |
Implementation Phases |
 |
<img class="bcls-icon" src="/assets/images/feather/copy.svg"> |
Ingest Profiles |
 |
<img class="bcls-icon" src="/assets/images/feather/log-in.svg"> |
Install Chrome Plugin |
|
<img class="bcls-icon" src="/assets/images/feather/smartphone.svg"> |
Install on your device |
 |
<img class="bcls-icon" src="/assets/images/feather/share-2.svg"> |
Integration |
 |
<img class="bcls-icon" src="/assets/images/feather/book-open.svg"> |
Learning Guide |
 |
<img class="bcls-icon" src="/assets/images/feather/airplay.svg"> |
Live Video |
 |
<img class="bcls-icon" src="/assets/images/feather/film.svg"> |
Managing Videos |
 |
<img class="bcls-icon" src="/assets/images/feather/compass.svg"> |
Navigate the UI |
 |
<img class="bcls-icon" src="/assets/images/feather/play-circle.svg"> |
Playback |
|
<img class="bcls-icon" src="/assets/images/feather/play-circle.svg"> |
Playback API |
|
<img class="bcls-icon" src="/assets/images/feather/airplay.svg"> |
Player Management API |
|
<img class="bcls-icon" src="/assets/images/feather/log-in.svg"> |
Plugins |
 |
<img class="bcls-icon" src="/assets/images/feather/key.svg"> |
Policy API |
 |
<img class="bcls-icon" src="/assets/images/feather/image.svg"> |
Publish |
 |
<img class="bcls-icon" src="/assets/images/feather/codesandbox.svg"> |
References |
 |
<img class="bcls-icon" src="/assets/images/feather/bell.svg"> |
Release Notes |
 |
<img class="bcls-icon" src="/assets/images/feather/search.svg"> |
Search |
 |
<img class="bcls-icon" src="/assets/images/feather/lock.svg"> |
Security, OAuth, DRM |
|
<img class="bcls-icon" src="/assets/images/feather/zap.svg"> |
Styling |
<img class="bcls-icon" src="/assets/images/feather/help-circle.svg"> |
Support | |
 |
<img class="bcls-icon" src="/assets/images/feather/repeat.svg"> |
Syncing |
|
<img class="bcls-icon" src="/assets/images/feather/layout.svg"> |
Syndication |
|
<img class="bcls-icon" src="/assets/images/feather/external-link.svg"> |
Training |
|
<img class="bcls-icon" src="/assets/images/feather/alert-circle.svg"> |
Troubleshooting |
 |
<img class="bcls-icon" src="/assets/images/feather/upload-cloud.svg"> |
Upload |
 |
<img src="/assets/images/product-logos/beacon-nut.svg"> |
Using {product} (need to create the icon) |
Fontawesome icons
| Icon | Code | Standard Use |
|---|---|---|
<i class=">fal fa-tools"></i> |
Administration | |
<i class=">far fa-ad"></i> |
Advertising | |
<i class="far fa-chart-bar"></i> |
Analytics | |
<i class="fal fa-cogs"></i> |
APIs | |
| /td> | <i class="far fa-shapes"></i> |
Basics |
<i class="far fa-brackets-curly"></i> |
Code | |
<i class="fab fa-connectdevelop"></i> |
Code Solutions | |
<i class="fas fa-mobile-android-alt"></i> |
Create Mobile App | |
<i class="far fa-browser"></i> |
Create a Web App | |
| < | <i class="far fa-edit"></i> |
Create App Design |
<i class="far fa-phone-laptop"></i> |
Create Experience | |
<i class="fal fa-users-medical"></i> |
Create Users | |
<i class="fal fa-phone-laptop"></i> |
Creating Apps | |
 |
<i class="fal fa-rocket-launch"></i> |
Creating your Application |
<i class="fas fa-th-list"></i> |
Create Playlist | |
<i class="far fa-tachometer-fast"></i> |
Dashboard | |
<i class="fal fa-filter"></i> |
Data Collection | |
 |
<i class="far fa-pencil-ruler"></i> |
Design Considerations |
<i class="fal fa-code-merge"></i> |
Delivery System | |
<i class="fal fa-code"></i> |
Developer | |
<i class="fal fa-file-alt"></i> |
Documentation | |
<i class="fas fa-fast-forward"></i> |
Encoding Guides | |
<i class="fal fa-cogs"></i> |
Encoding Settings | |
<i class="fal fa-exclamation-triangle"></i> |
Errors/Troubleshooting | |
<i class="far fa-external-link-square-alt"></i> |
External Link | |
<i class="far fa-info-circle"></i> |
General Information | |
|
<i class="far fa-location-arrow"></i> |
Getting Started |
<i class="fal fa-map-signs"></i> |
Guides | |
|
<i class="fal fa-project-diagram"></i> |
Implementation Phases |
<i class="fab fa-ioxhost"></i> |
Ingest Profiles | |
<i class="far fa-plug"></i> |
Install Chrome Plugin | |
<i class="fas fa-mobile-alt"></i> |
Install on your device | |
<i class="far fa-handshake-alt"></i> |
Integration | |
|
<i class="far fa-book-reader"></i> |
Learning Guide |
<i class="fas fa-satellite-dish"></i> |
Live Video | |
|
<i class="fas fa-film"></i> |
Managing Videos |
<i class="far fa-compass"></i> |
Navigate the UI | |
<i class="fal fa-play-circle"></i> |
Playback | |
<i class="fal fa-bring-front"></i> |
Playback API | |
<i class="fal fa-photo-video"></i> |
Player Management API | |
<i class="far fa-plug"></i> |
Plugins | |
<i class="fal fa-key"></i> |
Policy API | |
<i class="far fa-browser"></i> |
Publish | |
<i class="fal fa-books"></i> |
References | |
<i class="far fa-bell"></i> |
Release Notes | |
<i class="fal fa-search"></i> |
Search | |
<i class="fal fa-lock-alt"></i> |
Security, OAuth, DRM | |
<i class="far fa-hat-wizard"></i> |
Styling | |
<i class="far fa-question-circle"></i> |
Support | |
<i class="far fa-sync"></i> |
Syncing | |
<i class="fal fa-rss"></i> |
Syndication | |
<i class="far fa-chalkboard-teacher"></i> |
Training | |
<i class="far fa-exclamation-triangle"></i> |
Troubleshooting | |
<i class="far fa-cloud-upload-alt"></i> |
Upload | |
|
<img src="/assets/images/product-logos/beacon-nut.svg"> |
Using {product} (need to create the icon) |