diff options
Add Icons Pug template
1 files changed, 197 insertions, 0 deletions
| -rw-r--r-- | docs/src/contents/icons.pug | 197 |
diff --git a/docs/src/contents/icons.pug b/docs/src/contents/icons.pug index e69de29..b67f1a5 100644 --- a/docs/src/contents/icons.pug +++ b/docs/src/contents/icons.pug @@ -0,0 +1,197 @@ +p + | Icons are single-element, responsive and pure CSS icons. + | You can include #[code spectre-icons.css] located in the #[code dist] folder to your web #{'<head>'} to have these CSS icons. + ++docs-subheading('icons-navigation', 'Navigation icons') + +.columns + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-arrow-up + p icon-arrow-up + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-arrow-right + p icon-arrow-right + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-arrow-down + p icon-arrow-down + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-arrow-left + p icon-arrow-left + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-upward + p icon-upward + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-forward + p icon-forward + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-downward + p icon-downward + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-back + p icon-back + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-caret + p icon-caret + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-menu + p icon-menu + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-apps + p icon-apps + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-more-horiz + p icon-more-horiz + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-more-vert + p icon-more-vert + ++docs-subheading('icons-action', 'Action icons') + +.columns + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-resize-horiz + p icon-resize-horiz + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-resize-vert + p icon-resize-vert + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-plus + p icon-plus + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-minus + p icon-minus + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-cross + p icon-cross + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-check + p icon-check + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-stop + p icon-stop + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-shutdown + p icon-shutdown + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-refresh + p icon-refresh + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-search + p icon-search + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-flag + p icon-flag + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-bookmark + p icon-bookmark + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-edit + p icon-edit + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-delete + p icon-delete + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-share + p icon-share + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-download + p icon-download + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-upload + p icon-upload + ++docs-subheading('icons-object', 'Object icons') + +.columns + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-mail + p icon-mail + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-people + p icon-people + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-message + p icon-message + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-photo + p icon-photo + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-time + p icon-time + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-location + p icon-location + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-link + p icon-link + .column.col-3.col-md-6 + button.btn.btn-primary.btn-action.btn-lg + i.icon.icon-emoji + p icon-emoji + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <i class="icon icon-menu"></i> + ++docs-subheading('icons-sizes', 'Icon sizes') + +p + | Use #[code icon-2x], #[code icon-3x] and #[code icon-4x] classes to increase icon sizes. + | You can set #[code font-size] to have different icon sizes. + +.columns + .column.col-3.col-md-6 + p + i.icon.icon-2x.icon-mail + p icon-2x (32px) + .column.col-3.col-md-6 + p + i.icon.icon-3x.icon-mail + p icon-3x (48px) + .column.col-3.col-md-6 + p + i.icon.icon-4x.icon-mail + p icon-4x (64px) + +pre.code(data-lang='HTML') + code + :highlight(lang="html") + <i class="icon icon-2x icon-mail"></i>
\ No newline at end of file |