Convert docdock theme from submodule to native files and fix Hugo compatibility

This commit is contained in:
2025-10-07 22:04:56 +02:00
parent 4dde383587
commit 288932b4af
354 changed files with 41378 additions and 4 deletions

View File

@@ -0,0 +1,52 @@
+++
title = "DocDock Theme for Hugo"
description = ""
+++
# Hugo docDock theme
[Hugo-theme-docdock {{%icon fa-github%}}](https://github.com/vjeantet/hugo-theme-docdock) is a theme for Hugo, a fast and modern static website engine written in Go. Hugo is often used for blogs, **this theme is fully designed for documentation.**
This theme is a partial porting of the [Learn theme of matcornic {{%icon fa-github%}}](https://github.com/matcornic/hugo-theme-learn). and its default style "flex" comes from [facette.io](https://github.com/facette)'s documentation.
{{%panel%}}docDock works with a "page tree structure" to organize content : All contents are pages, which belong to other pages. [read more about this]({{%relref "content-organisation/_index.md"%}}) {{%/panel%}}
## Main features
* [Automatic Search]({{%relref "search/_index.md" %}})
* **Unlimited menu levels**
* [Generate RevealJS presentation]({{%relref "page-slide.md"%}}) from markdown (embededed or fullscreen page)
* Automatic next/prev buttons to navigate through menu entries
* [Image resizing, shadow...]({{%relref "create-page/page-images.md" %}})
* [Attachments files]({{%relref "shortcodes/attachments.md" %}})
* [List child pages]({{%relref "shortcodes/children/_index.md" %}})
* [Excerpt]({{%relref "shortcodes/excerpt.md"%}}) ! Include segment of content from one page in another
* [Mermaid diagram]({{%relref "shortcodes/mermaid.md" %}}) (flowchart, sequence, gantt)
* [Icons]({{%relref "shortcodes/icon.md" %}}), [Buttons]({{%relref "shortcodes/button.md" %}}), [Alerts]({{%relref "shortcodes/alert.md" %}}), [Panels]({{%relref "shortcodes/panel.md" %}}), [Tip/Note/Info/Warning boxes]({{%relref "shortcodes/notice.md" %}}), [Expand]({{%relref "shortcodes/expand.md" %}})
* [customizable look and feel]({{%relref "content-organisation/customize-style/_index.md"%}}), [theme style]({{%relref "content-organisation/customize-style/themestyle.md"%}}), [theme variants]({{%relref "content-organisation/customize-style/theme-variants.md"%}})
### Layout styles
This theme comes with two distinctive layout styles: Flex and Original. The main documentation is built with **Flex**, though available also in **[Original style](/original)**
#### Style "Flex" (default)
![](docdock-style-flex.png?classes=shadow)
#### Style "Original"
![](docdock-style-original.png?classes=shadow)
## Contribute to this documentation
Feel free to update this content, just click the **Edit this page** link displayed on top right of each page, and pullrequest it
{{%alert%}}Your modification will be deployed automatically when merged !{{%/alert%}}
## Documentation website
This current documentation has been statically generated with Hugo with a simple command : `hugo -t docdock` -- source code is [available here at GitHub {{%icon fa-github%}}](https://github.com/vjeantet/hugo-theme-docDock)
{{% panel theme="success" header="Automated deployments" footer="Netlify builds, deploys, and hosts frontends." %}}
Automatically published and hosted thanks to [Netlify](https://www.netlify.com/).
Read more about [Automated HUGO deployments with Netlify](https://www.netlify.com/blog/2015/07/30/hosting-hugo-on-netlifyinsanely-fast-deploys/)
{{% /panel %}}

View File

@@ -0,0 +1,138 @@
+++
title = "Content Organisation"
description = ""
weight = 20
+++
With **Hugo**, pages are the core of your site. Organize your site like any other Hugo project. **Magic occurs with the nested sections implemention done in v0.22 of hugo (congrats @bep)**.
With docdock, **Each content page composes the menu**, they shape the structure of your website.
To link pages to each other, place them in a folders hierarchy
```
content
├── level-one
│ ├── level-two
│ │ ├── level-three
│ │ │ ├── level-four
│ │ │ │ ├── _index.md
│ │ │ │ ├── page-4-a.md
│ │ │ │ ├── page-4-b.md
│ │ │ │ └── page-4-c.md
│ │ │ ├── _index.md
│ │ │ ├── page-3-a.md
│ │ │ ├── page-3-b.md
│ │ │ └── page-3-c.md
│ │ ├── _index.md
│ │ ├── page-2-a.md
│ │ ├── page-2-b.md
│ │ └── page-2-c.md
│ ├── _index.md
│ ├── page-1-a.md
│ ├── page-1-b.md
│ └── page-1-c.md
├── _index.md
└── page-top.md
```
{{%alert info %}} **_index.md** is required in each folder, it's your "folder home page"{{%/alert%}}
### Add header to a menu entry
in the page frontmatter, add a `head` param to insert any HTML code before the menu entry:
example to display a "Hello"
+++
title = "Github repo"
head ="<label>Hello</label> "
+++
### Add icon to a menu entry
in the page frontmatter, add a `pre` param to insert any HTML code before the menu label:
example to display a github icon
+++
title = "Github repo"
pre ="<i class='fa fa-github'></i> "
+++
![dsf](/menu-entry-icon.png?height=40px&classes=shadow)
<!-- ### Customize menu entry label
Add a `name` param next to `[menu.main]`
+++
[menu.main]
parent = ""
identifier = "repo"
pre ="<i class='fa fa-github'></i> "
name = "Github repo"
+++ -->
<!-- ### Create a page redirector
Add a `url` param next to `[menu.main]`
+++
[menu.main]
parent = "page"
identifier = "page-images"
weight = 23
url = "/shortcode/image/"
+++
{{%alert info%}}Look at the menu "Create Page/About images" which redirects to "Shortcodes/image{{%/alert%}}
-->
### Order sibling menu/page entries
in your frontmatter add `weight` param with a number to order.
+++
title="My page"
weight = 4
+++
{{%info%}}add `ordersectionsby = "title"` in your config.toml to order menu entries by title{{%/info%}}
### Hide a menu entry
in your frontmatter add `hidden=true` param.
+++
title="My page"
hidden = true
+++
### Unfolded menu entry by default
One or more menuentries can be displayed unfolded by default. (like the "Getting start" menu entry in this website)
in your frontmatter add `alwaysopen=true` param.
example :
```
title = "Getting start"
description = ""
weight = 1
alwaysopen = true
```
### Folder structure and file name
Content organization **is** your `content` folder structure.
### Homepage
Find out how to [customize homepage]({{%relref "homepage.md"%}})

View File

@@ -0,0 +1,66 @@
+++
title = "Customize website look and feel"
Weight=3
+++
You can change the style and behavior of the theme without touching it.
* inject your own html, css or js into the page
* overide existing css or js with your own files
{{%notice note %}}
No needs to copy the entire theme to customize some parts
Bellow are solutions to avoid copying the entire theme into your own codebase.
{{%/notice%}}
## Add custom CSS and JS or HTML into the \<head\> part of each page :
Create a custom header partial `layouts/partials/custom-head.html`
> * content/
> * layouts/
> * partials/
> * custom-head.html
write your own content like (an example from @nzbart):
```html
<link rel="stylesheet" href="/css/custom.css">
<script src="/js/custom.js"></script>
```
Then overrode the style your want to change in `static/css/custom.css` (in this case, to avoid altering the casing of titles):
```css
h2 {
text-transform: none;
}
```
And executed some additional JavaScript from `static/js/custom.js` (note that jQuery is already loaded by the theme):
```javascript
function tweakPage() {
// make some changes here
}
$(tweakPage)
```
now feel free to add the JS, CSS, HTML code you want :)
## Add custom HTML at the end of the body part of each page :
Create a `custom-footer.html` into a `layouts/partials` folder next to the content folder
> * content/
> * layouts/
> * partials/
> * custom-footer.html
now feel free to add the JS, CSS, HTML code you want :)
## Overide existing CSS or JS
Create the matching file in your static folder, hugo will use yours instead of the theme's one.
Example :
create a theme.css and place it into `static/css/` to fully overide docdock's theme.css

View File

@@ -0,0 +1,24 @@
+++
title = "Disable features"
+++
You can disable feature in docdock by changing some params in `config.toml`
## hide Next / Prev Chevrons
```
[params]
disableNavChevron = true
```
## hide Search box in side menu
```
[params]
disableSearch = true
```
## hide the {{%icon fa-home%}} icon in side bar
```
[params]
disableHomeIcon = true
```

View File

@@ -0,0 +1,35 @@
+++
title = "Theme variants"
description = "change theme style/colors"
+++
In site configuration file, you can set a variant name of this theme to load a specific css, with different color specifications.
add a param `themeVariant = "VARIANT_NAME"` in the `[params]` part of config.toml file.
{{%info%}}Available variants change only colors at this moment{{%/info%}}
## Variant "gray"
```
[params]
themeVariant = "gray"
```
![green docdock](/variant-gray.png)
## Variant "gold"
```
[params]
themeVariant = "gold"
```
![gold docdock](/variant-gold.png)
## Variant "green"
```
[params]
themeVariant = "green"`
```
![green docdock](/variant-green.png)

View File

@@ -0,0 +1,25 @@
+++
title = "Theme styles"
description = "change theme style"
+++
In site configuration file, you can set a subtheme name of this theme to load a specific css.
add a param `themeStyle = "STYLE_NAME"` in the `[params]` part of config.toml file.
## Style "original"
```
[params]
themeStyle = "original"
```
![green docdock](/variant-gray.png)
## Style "flex" (work in progress)
```
[params]
themeStyle = "flex"
```
![flex](/style-flex.png)

View File

@@ -0,0 +1,28 @@
+++
title = "Extra menu entries"
date = "2017-04-29T18:36:24+02:00"
Weight=2
+++
You can define additional menu entries in the navigation menu without any link to content.
Edit the website configuration `config.toml` and add a `[[menu.shortcuts]]` entry for each link your want to add.
Example from the current website, **note the `pre` param** which allows you to insert HTML code and used here to separate content's menu from this "static" menu
[[menu.shortcuts]]
pre = "<h3>More</h3>"
name = "<i class='fa fa-github'></i> Github repo"
identifier = "ds"
url = "https://github.com/vjeantet/hugo-theme-docdock"
weight = 1
[[menu.shortcuts]]
name = "<i class='fa fa-bookmark'></i> Hugo Documentation"
identifier = "hugodoc"
url = "https://gohugo.io/"
weight = 2
[{{%icon circle-arrow-right%}} Read more about hugo and menu here](https://gohugo.io/extras/menus/)

View File

@@ -0,0 +1,12 @@
+++
title = "Logo placeholder"
description = ""
date = "2017-04-24T18:36:24+02:00"
Weight=1
+++
Create a `_header.md` page in content folder. Its content is what you get in the logo placeholder (top left of the screen).
{{%alert info%}}**Tip :** you can add a image, a combobox with links to other documentation....{{%/alert%}}
{{%alert info%}}**Tip 2 :** look at [ extra static menu]({{%relref "extramenu.md"%}}) if you want to add links to other website in this sidebar{{%/alert%}}

View File

@@ -0,0 +1,54 @@
+++
title = "Create Page"
description = ""
date = "2017-04-24T18:36:24+02:00"
creatordisplayname = "Valere JEANTET"
creatoremail = "valere.jeantet@gmail.com"
lastmodifierdisplayname = "Valere JEANTET"
lastmodifieremail = "valere.jeantet@gmail.com"
tags = ["tag1","tag2"]
weight = 10
pre ="<i class='fa fa-edit' ></i> "
+++
Hugo-theme-docdock defines two types of pages. _Default_ and _Slide_.
* **Default** is the common page like the current one you are reading.
* **Slide** is a page that use the full screen to display its markdown content as a [reveals.js presentation](http://lab.hakim.se/reveal-js/).
* **HomePage** is a special content that will be displayed as home page content.
To tell Hugo-theme-docdock to consider a page as a slide, just add a `type="slide"`in then frontmatter of your file. [{{%icon circle-arrow-right%}}read more on page as slide]({{%relref "page-slide.md"%}})
Hugo-theme-docdock provides archetypes to help you create this kind of pages.
## Front Matter
Each Hugo page has to define a Front Matter in yaml, toml or json.
Hugo-theme-docdock uses the following parameters on top of the existing ones :
+++
# Type of content, set "slide" to display it fullscreen with reveal.js
type="page"
# Creator's Display name
creatordisplayname = "Valere JEANTET"
# Creator's Email
creatoremail = "valere.jeantet@gmail.com"
# LastModifier's Display name
lastmodifierdisplayname = "Valere JEANTET"
# LastModifier's Email
lastmodifieremail = "valere.jeantet@gmail.com"
+++
## Ordering
Hugo provides a flexible way to handle order for your pages.
The simplest way is to use `weight` parameter in the front matter of your page.
[{{%icon circle-arrow-right%}}Read more on content organization]({{%relref "content-organisation/_index.md"%}})

View File

@@ -0,0 +1,8 @@
+++
title = "Home page"
description = ""
date = "2017-04-28T18:36:24+02:00"
tags = ["tag1","tag2"]
+++
To tell Hugo-theme-docdock to consider a page as homepage's content, just create a content file named `_index.md` in content folder.

View File

@@ -0,0 +1,48 @@
+++
title = "My Slide ! fullscreen"
date = "2017-04-24T18:36:24+02:00"
type="slide"
hidden=true
theme = "league"
[revealOptions]
transition= 'concave'
controls= true
progress= true
history= false
center= true
+++
# In the morning
___
## Getting up
- Turn off alarm
- Get out of bed
___
## Breakfast
- Eat eggs
- Drink coffee
---
# In the evening
___
## Dinner
- Eat spaghetti
- Drink wine
___
## Going to sleep
- Get in bed
- Count sheep

View File

@@ -0,0 +1,28 @@
+++
title = "About images"
date = "2017-04-24T18:36:24+02:00"
+++
Images have a similar syntax to links but include a preceding exclamation point.
![agence](https://github.com/vjeantet/vjeantet.fr/raw/master/static/images/sgthon/C.jpg)
![agence](https://github.com/vjeantet/vjeantet.fr/raw/master/static/images/sgthon/C.jpg)
## Resizing image
Add HTTP parameters `width` and/or `height` to the link image to resize the image. Values are CSS values (default is `auto`).
![Hackathon](https://github.com/vjeantet/vjeantet.fr/raw/master/static/images/sgthon/C.jpg?height=80px)
![agence](https://github.com/vjeantet/vjeantet.fr/raw/master/static/images/sgthon/C.jpg?height=80px)
## Add CSS classes
Add a HTTP `classes` parameter to the link image to add CSS classes. `shadow` and `border` are available but you could define other ones.
![s](https://github.com/vjeantet/vjeantet.fr/raw/master/static/images/sgthon/C.jpg?classes=border,shadow)
![agence](https://github.com/vjeantet/vjeantet.fr/raw/master/static/images/sgthon/C.jpg?classes=border,shadow)

View File

@@ -0,0 +1,114 @@
+++
title = "Present a Slide"
description = ""
date = "2017-04-24T18:36:24+02:00"
+++
A basic md content page can be rendered as a reveal.js presentation full screen.
{{%alert info%}}You can, also, **embed presentation in a page** as a small box, using the [revealjs]({{% relref "shortcodes/revealjs.md"%}}) shortcode in your md file.{{%/alert%}}
## Formating
Use your common Markdown syntax you use in Hugo, don't forget, you can put html tags too.
{{%notice info %}} Special syntax (in html comment) is available for adding attributes to Markdown elements. This is useful for fragments, amongst other things.
{{%/notice%}}
Please read the [{{%icon book%}} doc from hakimel](https://github.com/hakimel/reveal.js/#instructions)
## Options
In the frontmatter of your page file, set **type** and **revealOptions** params
Your content will be served as a fullscreen revealjs presentation and revealOptions will be used to ajust its behaviour.
+++
title = "Test slide"
type="slide"
theme = "league"
[revealOptions]
transition= 'concave'
controls= true
progress= true
history= true
center= true
+++
[read more about reveal options here](https://github.com/hakimel/reveal.js/#configuration)
## Slide Delimiters
When creating the content for your slideshow presentation within content markdown file you need to be able to distinguish between one slide and the next. This is achieved very simply using a convention within Markdown that indicates the start of each new slide.
As both horizontal and vertical slides are supported by reveal.js each has it's own unique delimiter.
To denote the start of a horizontal slide simply add the following delimiter (dashes) in your Markdown:
---
To denote the start of a vertical slide simply add the following delimiter (underscores) in your Markdown:
___
By using a combination of horizontal and vertical slides you can customize the navigation within your slideshow presentation. Typically vertical slides are used to present information below a top-level horizontal slide.
For example, a very simple slideshow presentation can be created as follows
```
+++
title = "test"
date = "2017-04-24T18:36:24+02:00"
type="slide"
theme = "league"
[revealOptions]
transition= 'concave'
controls= true
progress= true
history= true
center= true
+++
# In the morning
___
## Getting up
- Turn off alarm
- Get out of bed
___
## Breakfast
- Eat eggs
- Drink coffee
---
# In the evening
___
## Dinner
- Eat spaghetti
- Drink wine
___
## Going to sleep
- Get in bed
- Count sheep
```
[{{%icon expand%}}click here to view this page rendered]({{%relref "myslide.md"%}})

View File

@@ -0,0 +1,44 @@
+++
title = "Credits"
description = "contributors and packages used by hugo-theme-docdock"
+++
## github contributors
{{%ghcontributors "https://api.github.com/repos/vjeantet/hugo-theme-docdock/contributors?per_page=100" %}}
### Other contribution
<div class="ghContributors">
<div>
<img src="https://avatars2.githubusercontent.com/u/394382?v=3" class="inline" width="32" height="32" style="height: 32px;height: 32px;margin-bottom:.25em; vertical-align:middle; ">
<label>@<a href="https://github.com/bep">bep</a></label>
<span class="contributions">supports and advices</span>
</div>
<div>
<img src="https://avatars1.githubusercontent.com/u/959400?s=200&v=4" class="inline" width="32" height="32" style="height: 32px;height: 32px;margin-bottom:.25em; vertical-align:middle; ">
<label>@<a href="https://github.com/facette">facette.io</a></label>
<span class="contributions">Flex style based on facette documentation theme, <br>Thanks to @vbatoufflet</span>
</div>
</div>
## Packages and libraries
* [Bootstrap](http://getbootstrap.com) - front-end framework
* [mermaid](https://knsv.github.io/mermaid) - generation of diagram and flowchart from text in a similar manner as markdown
* [font awesome](http://fontawesome.io/) - the iconic font and CSS framework
* [jQuery](https://jquery.com) - The Write Less, Do More, JavaScript Library
* [lunr](https://lunrjs.com) - Lunr enables you to provide a great search experience without the need for external, server-side, search services...
* [JavaScript-autoComplete](https://github.com/Pixabay/JavaScript-autoComplete) - An extremely lightweight and powerful vanilla JavaScript completion suggester.
* [clipboard.js](https://zenorocha.github.io/clipboard.js) - copy text to clipboard
* [highlight.js](https://highlightjs.org) - Javascript syntax highlighter
* [modernizr](https://modernizr.com) - A JavaScript toolkit that allows web developers to use new CSS3 and HTML5 features while maintaining a fine level of control over browsers that don't support
* [reveal-js](http://lab.hakim.se/reveal-js) - The HTML Presentation Framework
## Tooling
* [Netlify](https://www.netlify.com) - Continuous deployement and hosting of this documentation
* [Hugo](https://gohugo.io/) {{%icon "fa-smile-o"%}}

View File

@@ -0,0 +1,12 @@
+++
title = "Getting started"
description = ""
weight = 1
alwaysopen = true
+++
## Requirements
Download [Hugo binary](https://gohugo.io/overview/installing/) for your OS (Windows, Linux, Mac) : its that simple
{{%children style="h2" description="true"%}}

View File

@@ -0,0 +1,56 @@
+++
title = "Configuration"
description = ""
weight = 2
+++
When building the website, you can set a theme by using `--theme` option. We suggest you to edit your configuration file and set the theme by default. Example with `config.toml` format.
<!--more-->
Import sample config from sample site to Hugo root:
```
$ cp themes/docdock/exampleSite/config.toml .
```
Change following `config.toml` line as needed, depending on method above:
```
theme = "<hugo-theme-docdock-dir-name>"
```
Comment out following line, so default `themes/` will be used:
```
# themesdir = "../.."
```
{{%excerpt%}}
## Activate search
If not already present, add the follow lines to the `config.toml` file.
```toml
[outputs]
home = [ "HTML", "RSS", "JSON"]
```
{{% /excerpt%}}
LUNRJS search index file will be generated on content changes.
#### (Bonus)
Create empty file `.gitkeep` inside `public/` and add following to `.gitignore`. This way it will keep repo smaller and won't bring build result files and errors to remote checkout places:
```
/public/*
!/public/.gitkeep
```
### Preview site
```
$ hugo server
```
to browse site on http://localhost:1313
## Your website's content
Find out how to [create]({{%relref "create-page/_index.md"%}}) and [organize your content]({{%relref "content-organisation/_index.md"%}}) quickly and intuitively.

View File

@@ -0,0 +1,83 @@
+++
title = "Installation"
description = ""
weight = 1
+++
{{% alert theme="warning" %}}HUGO **v0.32** minimum required to use this theme{{%/alert%}}
The following steps are here to help you initialize your new website. If you dont know Hugo at all, we strongly suggest you to train by following this [great documentation for beginners](https://gohugo.io/overview/quickstart/).
<!--more-->
## Installation
We assume that all changes to Hugo content and customizations are going to be tracked by git (GitHub, Bitbucket etc.). Develop locally, build on remote system.
Before start real work:
1. Initialize Hugo
2. Install DocDock theme
3. Configure DocDock and Hugo
### Prepare empty Hugo site
Create empty directory, which will be root of your Hugo project. Navigate there and let Hugo to create minimal required directory structure:
```
$ hugo new site .
```
AFTER that, initialize this as git directory where to track further changes
```
$ git init
```
Next, there are at least three ways to install DocDock (first recommended):
1. **As git submodule**
2. As git clone
3. As direct copy (from ZIP)
Navigate to your themes folder in your Hugo site and use perform one of following scenarios.
### 1. Install DocDock as git submodule
DocDock will be added like a dependency repo to original project. When using CI tools like Netlify, Jenkins etc., submodule method is required, or you will get `theme not found` issues. Same applies when building site on remote server trough SSH.
If submodule is no-go, use 3rd option.
On your root of Hugo execute:
```
$ git submodule add https://github.com/vjeantet/hugo-theme-docdock.git themes/docdock
```
Next initialize submodule for parent git repo:
```
$ git submodule init
$ git submodule update
```
Now you are ready to add content and customize looks. Do not change any file inside theme directory.
If you want to freeze changes to DocDock theme itself and use still submodules, fork private copy of DocDock and use that as submodule. When you are ready to update theme, just pull changes from origin to your private fork.
### 2. Install DocDock simply as git clone
This method results that files are checked out locally, but won't be visible from parent git repo. Probably you will build site locally with `hugo` command and use result from `public/` on your own.
```
$ git clone https://github.com/vjeantet/hugo-theme-docdock.git themes/docdock
```
### 3. Install DocDock from ZIP
All files from theme will be tracked inside parent repo, to update it, have to override files in theme. [{{%icon download%}} download following zip](https://github.com/vjeantet/hugo-theme-docdock/archive/master.zip) and extract inside `themes/`.
```
https://github.com/vjeantet/hugo-theme-docdock/archive/master.zip
```
Name of theme in next step will be `hugo-theme-docdock-master`, can rename as you wish.
## Configuration
[Follow instructions here]({{%relref "configuration.md"%}})

View File

@@ -0,0 +1,13 @@
+++
title = "About the Search Engine"
description = ""
weight = 40
+++
{{%excerpt-include filename="getting-start/configuration.md" /%}}
Docdock theme uses the last improvement available in hugo version 20+ to generate a json index file ready to be consumed by lunr.js javascript search engine.
{{%note%}}hugo generate lunrjs index.json at the root of `public` folder if the site only has one language or within each language subfolder. <br/>When you build the site with `hugo server`, hugo generates it internally and of course it don't show up in the filesystem{{%/note%}}

View File

@@ -0,0 +1,10 @@
+++
title = "Shortcodes"
description = ""
date = "2017-04-24T18:36:24+02:00"
weight = 30
+++
A bunch of Shortcodes are available with this theme :
{{%children style="card" description="true" %}}

View File

@@ -0,0 +1,30 @@
+++
title = "alert"
description = "The alert shortcode allows you to highlight information in your page."
+++
The `alert` shortcode allow you to highlight information in your page. They create a colored box surrounding your text, like this:
{{%alert%}}**This is** an alert !{{%/alert%}}
## Usage
| Parameter | Default | Description |
|:--|:--|:--|
| theme | `info` | `success`, `info`,`warning`,`danger` |
{{%alert info%}}
**Tips :** setting only the theme as argument works too :
`{{%/*alert warning*/%}}` instead of `{{%/*alert theme="warning"*/%}}`
{{%/alert%}}
## Basic examples
{{%/* alert theme="info" */%}}**this** is a text{{%/* /alert */%}}
{{%/* alert theme="success" */%}}**Yeahhh !** is a text{{%/* /alert */%}}
{{%/* alert theme="warning" */%}}**Be carefull** is a text{{%/* /alert */%}}
{{%/* alert theme="danger" */%}}**Beware !** is a text{{%/* /alert */%}}
{{% alert theme="info"%}}**this** is an info{{% /alert %}}
{{% alert theme="success" %}}**Yeahhh !** is an success{{% /alert %}}
{{% alert theme="warning" %}}**Be carefull** is a warning{{% /alert %}}
{{% alert theme="danger" %}}**Beware !** is a danger{{% /alert %}}

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

View File

@@ -0,0 +1,59 @@
+++
title = "attachments"
description = "The Attachments shortcode displays a list of files attached to a page."
+++
The Attachments shortcode displays a list of files attached to a page.
Example :
{{%alert success%}}{{%attachments /%}}{{%/alert%}}
## Usage
The shortcurt lists files found in a **specific folder**.
Currently, it support two implementations for pages
1. If your page is a markdown file, attachements must be place in a **folder** named like your page and ending with **.files**.
> * content
> * _index.md
> * page.files
> * attachment.pdf
> * page.md
2. If your page is a **folder**, attachements must be place in a nested **'files'** folder.
> * content
> * _index.md
> * page
> * index.md
> * files
> * attachment.pdf
That's all !
{{%alert info%}}**Tip** : Look at this documentation source code on github{{%/alert%}}
### parameters
| Parameter | Default | Description |
|:--|:--|:--|
| title | "Attachments" | List's title |
| pattern | ".*" | A regular expressions, used to filter the attachments by file name. <br/><br/>{{%alert warning%}}The **pattern** parameter value must be [regular expressions](https://en.wikipedia.org/wiki/Regular_expression).
For example:
* To match a file suffix of 'jpg', use **.*jpg** (not *.jpg).
* To match file names ending in 'jpg' or 'png', use **.*(jpg|png)**
{{%/alert%}}|
## Demo
### List of attachments ending in pdf or mp4
{{%/*attachments title="Related files" pattern=".*(pdf|mp4)"/*/%}}
renders as
{{%attachments title="Related files" pattern=".*(pdf|mp4)"/%}}

View File

@@ -0,0 +1,37 @@
+++
title = "button"
description = "Display an actionable button in your page."
+++
Display an actionable button in your page.
{{<button align="center" href="#" theme="warning" >}} This is a warning button {{< /button >}}
## Usage
| Parameter | Default | Description |
|:--|:--|:--|
| href | "" | The location href to link to |
| align | "center" | horizontal align button on page |
| theme | `primary` | `default`, `primary` , `success`,`info`,`warning`,`danger` |
The inner text you place in short code will be displayed as the _button text_
## Demo
{{</* button href="https://google.com" */>}} go to google {{</* /button */>}}
{{</* button href="https://google.com" theme="success" */>}} Success {{</* /button */>}}
{{</* button href="https://google.com" theme="info" */>}} Info {{</* /button */>}}
{{</* button href="https://google.com" theme="warning" */>}} Warning {{</* /button */>}}
{{</* button href="https://google.com" theme="danger" */>}} Danger ! {{</* /button */>}}
{{</* button href="https://google.com" theme="default" */>}} Danger ! {{</* /button */>}}
{{<button href="https://google.com" >}} go to google {{< /button >}}
{{<button href="https://google.com" theme="success">}} Success {{< /button >}}
{{<button href="https://google.com" theme="info">}} Info {{< /button >}}
{{<button href="https://google.com" theme="warning">}} Warning {{< /button >}}
{{<button href="https://google.com" theme="danger">}} Danger ! {{< /button >}}
{{<button href="https://google.com" theme="default">}} Danger ! {{< /button >}}

View File

@@ -0,0 +1,46 @@
+++
title = "children"
description = "List the child pages of a page"
+++
Use the children shortcode to list the child pages of a page and the further descendants (children's children). By default, the shortcode displays links to the child pages.
## Usage
| Parameter | Default | Description |
|:--|:--|:--|
| page | _current_ | Specify the page name (section name) to display children for |
| style | "li" | Choose the style used to display descendants. It could be any HTML tag name, use "card" to display children pages as cards |
| showhidden | "false" | When true, child pages hidden from the menu will be displayed |
| description | "false" | Allows you to include a short text under each page in the list.<br/>when no description exists for the page, children shortcode takes the first 70 words of your content. [read more info about summaries on gohugo.io](https://gohugo.io/content/summaries/) |
| depth | 1 | Enter a number to specify the depth of descendants to display. For example, if the value is 2, the shortcode will display 2 levels of child pages. {{%alert success%}}**Tips:** set 999 to get all descendants{{%/alert%}}|
| sort | none | Sort Children By<br><li><strong>Weight</strong> - to sort on menu order</li><li><strong>Name</strong> - to sort alphabetically on menu label</li><li><strong>Identifier</strong> - to sort alphabetically on identifier set in frontmatter</li><li><strong>URL</strong> - URL</li> |
## Demo
{{%/* children */%}}
{{%children %}}
{{%/* children description="true" */%}}
{{%children description="true" %}}
{{%/* children depth="3" showhidden="true" */%}}
{{% children depth="3" showhidden="true" %}}
{{%/* children style="h2" depth="3" description="true" */%}}
{{% children style="h2" depth="3" description="true" %}}
{{%/* children style="div" depth="999" */%}}
{{% children style="div" depth="999" %}}
{{%/* children style="card" depth="2" description="true" */%}}
{{% children style="card" depth="2" description="true" %}}

View File

@@ -0,0 +1,6 @@
+++
title = "page 1"
description = "This is a demo child page"
+++
This is a demo child page

View File

@@ -0,0 +1,6 @@
+++
title = "page 1-1"
description = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod"
+++
This is a demo child page

View File

@@ -0,0 +1,6 @@
+++
title = "page 1-1-1"
description = "This is a demo child page"
+++
This is a demo child page

View File

@@ -0,0 +1,6 @@
+++
title = "page 1-1-1-1"
description = "This is a demo child page"
+++
This is a demo child page

View File

@@ -0,0 +1,6 @@
+++
title = "page 1-1-1-1-1"
description = "This is a demo child page"
+++
This is a demo child page

View File

@@ -0,0 +1,11 @@
+++
title = "page 2"
description = ""
+++
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

View File

@@ -0,0 +1,6 @@
+++
title = "page test 3"
description = "This is a page test"
+++
This is a test 3 demo child page

View File

@@ -0,0 +1,6 @@
+++
title = "page 3"
description = "This is a demo child page"
+++
This is a demo child page

View File

@@ -0,0 +1,7 @@
+++
title = "page 4"
description = "This is a demo child page"
hidden=true
+++
This is a demo child page, not displayed in the menu

View File

@@ -0,0 +1,6 @@
+++
title = "page test"
description = "This is a page test"
+++
This is a test demo child page

View File

@@ -0,0 +1,25 @@
+++
title = "excerpt-include"
description = ""
+++
The Excerpt Include shortcode is used to display 'excerpted' (that is, a segment of) content from one page in another.
Before you can use this shortcode, the excerpt must have been defined using the Excerpt shortcode. {{%alert info%}}Note that you can have more than one Excerpt Include shortcode on a page (although you can have only one Excerpt shortcode on a page).{{%/alert%}}
## Usage
| Parameter | Default | Description |
|:--|:--|:--|
| filename | **required** | Type the filename of the page that contains the excerpt to be displayed.<br/>Path is relative to the content folder|
| panel | none | Determines whether docDock will display a panel around the excerpted content. The panel includes the given panel's value and the border of the panel. By default, the panel and title are not shown.|
## Demo
The paragraph below shows an example of an Excerpt Include shortcode, containing content from an excerpt which we have defined on the Excerpt shortcode page. On the Excerpt Include shortcode below, we have set the options to show both the title of the page and the panel surrounding the content.
{{%/*excerpt-include filename="shortcodes/excerpt.md" panel="From excerpt page" /*/%}}
{{%excerpt-include filename="shortcodes/excerpt.md" panel="From excerpt page" /%}}
> Don't create an excerpt file in the ```/layouts/shortcodes/``` folder.
> In this example, ```shortcodes/filename.md``` is part of the ```exampleSite/content``` folder, and ```shortcodes``` is just a path in the ```/content```.

View File

@@ -0,0 +1,39 @@
+++
title = "excerpt"
description = "The Excerpt shortcode is used to mark a part of a page's content for re-use."
+++
The Excerpt shortcode is used to mark a part of a page's content for re-use. Defining an excerpt enables other shortcodes, such as the excerpt-include shortcode, to display the marked content elsewhere.
{{%alert warning%}}You can only define one excerpt per page. In other words, you can only add the Excerpt shortcode once to a page.{{%/alert%}}
## Usage
| Parameter | Default | Description |
|:--|:--|:--|
| hidden | "false" | Controls whether the page content contained in the Excerpt shortcode placeholder is displayed on the page.{{%alert warning%}}Note that this option affects only the page that contains the Excerpt shortcode. It does not affect any pages where the content is reused.{{%/alert%}} |
## Demo
{{%/*excerpt*/%}}
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation **ullamco** laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in _reprehenderit in voluptate_
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
{{%/* /excerpt*/%}}
{{%excerpt%}}
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation **ullamco** laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in _reprehenderit in voluptate_
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
{{% /excerpt%}}
{{%alert info%}}See re use example with [excerpt-include shortcode]({{%relref "shortcodes/excerpt-include.md"%}}){{%/alert%}}

View File

@@ -0,0 +1,41 @@
+++
title = "expand"
description = "Displays an expandable/collapsible section of text on your page"
+++
The Expand shortcode displays an expandable/collapsible section of text on your page.
Here is an example
{{%expand%}}Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.{{%/expand%}}
## Usage
this shortcode takes exactly one optional parameter to define the text that appears next to the expand/collapse icon. (default is "Expand me...")
{{%/*expand "Is this docdock theme rocks ?" */%}}Yes !.{{%/* /expand*/%}}
{{%expand "Is this docdock theme rocks ?" %}}Yes !{{% /expand%}}
# Demo
{{%/*expand*/%}}Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.{{%/* /expand*/%}}
{{%expand%}}Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.{{% /expand%}}

View File

@@ -0,0 +1,1254 @@
+++
title = "icon"
description = "Display an icon."
+++
Display an icon like {{% icon cloud %}}
It uses :
* glyphicons library (bootstrap).[more info here](http://getbootstrap.com/components/#glyphicons)
* fontawesome library [more info here](http://fontawesome.io/)
This `icon` shortcode will display an icon in your page.
## Usage
| Parameter | Default | Description |
|:--|:--|:--|
| name | **required** | name of icon (see bellow) |
| size | none | size of icon, medium, xx-small, x-small, small, large, x-large, xx-large, 11px, 2em, 20%.... |
{{%alert info%}}
**Tips :**
setting only the name as argument works too : `{{</*icon film*/>}}` instead of `{{</*icon name="film"*/>}}`
{{%/alert%}}
# Demo
{{</* icon name="film" size="large" */>}}
{{<icon name="film" size="large">}}
.
# icons available
- {{< icon name="asterisk" size="large" >}} asterisk
- {{< icon name="plus" size="large" >}} plus
- {{< icon name="euro" size="large" >}} euro
- {{< icon name="eur" size="large" >}} eur
- {{< icon name="minus" size="large" >}} minus
- {{< icon name="cloud" size="large" >}} cloud
- {{< icon name="envelope" size="large" >}} envelope
- {{< icon name="pencil" size="large" >}} pencil
- {{< icon name="glass" size="large" >}} glass
- {{< icon name="music" size="large" >}} music
- {{< icon name="search" size="large" >}} search
- {{< icon name="heart" size="large" >}} heart
- {{< icon name="star" size="large" >}} star
- {{< icon name="star-empty" size="large" >}} star-empty
- {{< icon name="user" size="large" >}} user
- {{< icon name="film" size="large" >}} film
- {{< icon name="th-large" size="large" >}} th-large
- {{< icon name="th" size="large" >}} th
- {{< icon name="th-list" size="large" >}} th-list
- {{< icon name="ok" size="large" >}} ok
- {{< icon name="remove" size="large" >}} remove
- {{< icon name="zoom-in" size="large" >}} zoom-in
- {{< icon name="zoom-out" size="large" >}} zoom-out
- {{< icon name="off" size="large" >}} off
- {{< icon name="signal" size="large" >}} signal
- {{< icon name="cog" size="large" >}} cog
- {{< icon name="trash" size="large" >}} trash
- {{< icon name="home" size="large" >}} home
- {{< icon name="file" size="large" >}} file
- {{< icon name="time" size="large" >}} time
- {{< icon name="road" size="large" >}} road
- {{< icon name="download-alt" size="large" >}} download-alt
- {{< icon name="download" size="large" >}} download
- {{< icon name="upload" size="large" >}} upload
- {{< icon name="inbox" size="large" >}} inbox
- {{< icon name="play-circle" size="large" >}} play-circle
- {{< icon name="repeat" size="large" >}} repeat
- {{< icon name="refresh" size="large" >}} refresh
- {{< icon name="list-alt" size="large" >}} list-alt
- {{< icon name="lock" size="large" >}} lock
- {{< icon name="flag" size="large" >}} flag
- {{< icon name="headphones" size="large" >}} headphones
- {{< icon name="volume-off" size="large" >}} volume-off
- {{< icon name="volume-down" size="large" >}} volume-down
- {{< icon name="volume-up" size="large" >}} volume-up
- {{< icon name="qrcode" size="large" >}} qrcode
- {{< icon name="barcode" size="large" >}} barcode
- {{< icon name="tag" size="large" >}} tag
- {{< icon name="tags" size="large" >}} tags
- {{< icon name="book" size="large" >}} book
- {{< icon name="bookmark" size="large" >}} bookmark
- {{< icon name="print" size="large" >}} print
- {{< icon name="camera" size="large" >}} camera
- {{< icon name="font" size="large" >}} font
- {{< icon name="bold" size="large" >}} bold
- {{< icon name="italic" size="large" >}} italic
- {{< icon name="text-height" size="large" >}} text-height
- {{< icon name="text-width" size="large" >}} text-width
- {{< icon name="align-left" size="large" >}} align-left
- {{< icon name="align-center" size="large" >}} align-center
- {{< icon name="align-right" size="large" >}} align-right
- {{< icon name="align-justify" size="large" >}} align-justify
- {{< icon name="list" size="large" >}} list
- {{< icon name="indent-left" size="large" >}} indent-left
- {{< icon name="indent-right" size="large" >}} indent-right
- {{< icon name="facetime-video" size="large" >}} facetime-video
- {{< icon name="picture" size="large" >}} picture
- {{< icon name="map-marker" size="large" >}} map-marker
- {{< icon name="adjust" size="large" >}} adjust
- {{< icon name="tint" size="large" >}} tint
- {{< icon name="edit" size="large" >}} edit
- {{< icon name="share" size="large" >}} share
- {{< icon name="check" size="large" >}} check
- {{< icon name="move" size="large" >}} move
- {{< icon name="step-backward" size="large" >}} step-backward
- {{< icon name="fast-backward" size="large" >}} fast-backward
- {{< icon name="backward" size="large" >}} backward
- {{< icon name="play" size="large" >}} play
- {{< icon name="pause" size="large" >}} pause
- {{< icon name="stop" size="large" >}} stop
- {{< icon name="forward" size="large" >}} forward
- {{< icon name="fast-forward" size="large" >}} fast-forward
- {{< icon name="step-forward" size="large" >}} step-forward
- {{< icon name="eject" size="large" >}} eject
- {{< icon name="chevron-left" size="large" >}} chevron-left
- {{< icon name="chevron-right" size="large" >}} chevron-right
- {{< icon name="plus-sign" size="large" >}} plus-sign
- {{< icon name="minus-sign" size="large" >}} minus-sign
- {{< icon name="remove-sign" size="large" >}} remove-sign
- {{< icon name="ok-sign" size="large" >}} ok-sign
- {{< icon name="question-sign" size="large" >}} question-sign
- {{< icon name="info-sign" size="large" >}} info-sign
- {{< icon name="screenshot" size="large" >}} screenshot
- {{< icon name="remove-circle" size="large" >}} remove-circle
- {{< icon name="ok-circle" size="large" >}} ok-circle
- {{< icon name="ban-circle" size="large" >}} ban-circle
- {{< icon name="arrow-left" size="large" >}} arrow-left
- {{< icon name="arrow-right" size="large" >}} arrow-right
- {{< icon name="arrow-up" size="large" >}} arrow-up
- {{< icon name="arrow-down" size="large" >}} arrow-down
- {{< icon name="share-alt" size="large" >}} share-alt
- {{< icon name="resize-full" size="large" >}} resize-full
- {{< icon name="resize-small" size="large" >}} resize-small
- {{< icon name="exclamation-sign" size="large" >}} exclamation-sign
- {{< icon name="gift" size="large" >}} gift
- {{< icon name="leaf" size="large" >}} leaf
- {{< icon name="fire" size="large" >}} fire
- {{< icon name="eye-open" size="large" >}} eye-open
- {{< icon name="eye-close" size="large" >}} eye-close
- {{< icon name="warning-sign" size="large" >}} warning-sign
- {{< icon name="plane" size="large" >}} plane
- {{< icon name="calendar" size="large" >}} calendar
- {{< icon name="random" size="large" >}} random
- {{< icon name="comment" size="large" >}} comment
- {{< icon name="magnet" size="large" >}} magnet
- {{< icon name="chevron-up" size="large" >}} chevron-up
- {{< icon name="chevron-down" size="large" >}} chevron-down
- {{< icon name="retweet" size="large" >}} retweet
- {{< icon name="shopping-cart" size="large" >}} shopping-cart
- {{< icon name="folder-close" size="large" >}} folder-close
- {{< icon name="folder-open" size="large" >}} folder-open
- {{< icon name="resize-vertical" size="large" >}} resize-vertical
- {{< icon name="resize-horizontal" size="large" >}} resize-horizontal
- {{< icon name="hdd" size="large" >}} hdd
- {{< icon name="bullhorn" size="large" >}} bullhorn
- {{< icon name="bell" size="large" >}} bell
- {{< icon name="certificate" size="large" >}} certificate
- {{< icon name="thumbs-up" size="large" >}} thumbs-up
- {{< icon name="thumbs-down" size="large" >}} thumbs-down
- {{< icon name="hand-right" size="large" >}} hand-right
- {{< icon name="hand-left" size="large" >}} hand-left
- {{< icon name="hand-up" size="large" >}} hand-up
- {{< icon name="hand-down" size="large" >}} hand-down
- {{< icon name="circle-arrow-right" size="large" >}} circle-arrow-right
- {{< icon name="circle-arrow-left" size="large" >}} circle-arrow-left
- {{< icon name="circle-arrow-up" size="large" >}} circle-arrow-up
- {{< icon name="circle-arrow-down" size="large" >}} circle-arrow-down
- {{< icon name="globe" size="large" >}} globe
- {{< icon name="wrench" size="large" >}} wrench
- {{< icon name="tasks" size="large" >}} tasks
- {{< icon name="filter" size="large" >}} filter
- {{< icon name="briefcase" size="large" >}} briefcase
- {{< icon name="fullscreen" size="large" >}} fullscreen
- {{< icon name="dashboard" size="large" >}} dashboard
- {{< icon name="paperclip" size="large" >}} paperclip
- {{< icon name="heart-empty" size="large" >}} heart-empty
- {{< icon name="link" size="large" >}} link
- {{< icon name="phone" size="large" >}} phone
- {{< icon name="pushpin" size="large" >}} pushpin
- {{< icon name="usd" size="large" >}} usd
- {{< icon name="gbp" size="large" >}} gbp
- {{< icon name="sort" size="large" >}} sort
- {{< icon name="sort-by-alphabet" size="large" >}} sort-by-alphabet
- {{< icon name="sort-by-alphabet-alt" size="large" >}} sort-by-alphabet-alt
- {{< icon name="sort-by-order" size="large" >}} sort-by-order
- {{< icon name="sort-by-order-alt" size="large" >}} sort-by-order-alt
- {{< icon name="sort-by-attributes" size="large" >}} sort-by-attributes
- {{< icon name="sort-by-attributes-alt" size="large" >}} sort-by-attributes-alt
- {{< icon name="unchecked" size="large" >}} unchecked
- {{< icon name="expand" size="large" >}} expand
- {{< icon name="collapse-down" size="large" >}} collapse-down
- {{< icon name="collapse-up" size="large" >}} collapse-up
- {{< icon name="log-in" size="large" >}} log-in
- {{< icon name="flash" size="large" >}} flash
- {{< icon name="log-out" size="large" >}} log-out
- {{< icon name="new-window" size="large" >}} new-window
- {{< icon name="record" size="large" >}} record
- {{< icon name="save" size="large" >}} save
- {{< icon name="open" size="large" >}} open
- {{< icon name="saved" size="large" >}} saved
- {{< icon name="import" size="large" >}} import
- {{< icon name="export" size="large" >}} export
- {{< icon name="send" size="large" >}} send
- {{< icon name="floppy-disk" size="large" >}} floppy-disk
- {{< icon name="floppy-saved" size="large" >}} floppy-saved
- {{< icon name="floppy-remove" size="large" >}} floppy-remove
- {{< icon name="floppy-save" size="large" >}} floppy-save
- {{< icon name="floppy-open" size="large" >}} floppy-open
- {{< icon name="credit-card" size="large" >}} credit-card
- {{< icon name="transfer" size="large" >}} transfer
- {{< icon name="cutlery" size="large" >}} cutlery
- {{< icon name="header" size="large" >}} header
- {{< icon name="compressed" size="large" >}} compressed
- {{< icon name="earphone" size="large" >}} earphone
- {{< icon name="phone-alt" size="large" >}} phone-alt
- {{< icon name="tower" size="large" >}} tower
- {{< icon name="stats" size="large" >}} stats
- {{< icon name="sd-video" size="large" >}} sd-video
- {{< icon name="hd-video" size="large" >}} hd-video
- {{< icon name="subtitles" size="large" >}} subtitles
- {{< icon name="sound-stereo" size="large" >}} sound-stereo
- {{< icon name="sound-dolby" size="large" >}} sound-dolby
- {{< icon name="sound-5-1" size="large" >}} sound-5-1
- {{< icon name="sound-6-1" size="large" >}} sound-6-1
- {{< icon name="sound-7-1" size="large" >}} sound-7-1
- {{< icon name="copyright-mark" size="large" >}} copyright-mark
- {{< icon name="registration-mark" size="large" >}} registration-mark
- {{< icon name="cloud-download" size="large" >}} cloud-download
- {{< icon name="cloud-upload" size="large" >}} cloud-upload
- {{< icon name="tree-conifer" size="large" >}} tree-conifer
- {{< icon name="tree-deciduous" size="large" >}} tree-deciduous
- {{< icon name="cd" size="large" >}} cd
- {{< icon name="save-file" size="large" >}} save-file
- {{< icon name="open-file" size="large" >}} open-file
- {{< icon name="level-up" size="large" >}} level-up
- {{< icon name="copy" size="large" >}} copy
- {{< icon name="paste" size="large" >}} paste
- {{< icon name="alert" size="large" >}} alert
- {{< icon name="equalizer" size="large" >}} equalizer
- {{< icon name="king" size="large" >}} king
- {{< icon name="queen" size="large" >}} queen
- {{< icon name="pawn" size="large" >}} pawn
- {{< icon name="bishop" size="large" >}} bishop
- {{< icon name="knight" size="large" >}} knight
- {{< icon name="baby-formula" size="large" >}} baby-formula
- {{< icon name="tent" size="large" >}} tent
- {{< icon name="blackboard" size="large" >}} blackboard
- {{< icon name="bed" size="large" >}} bed
- {{< icon name="apple" size="large" >}} apple
- {{< icon name="erase" size="large" >}} erase
- {{< icon name="hourglass" size="large" >}} hourglass
- {{< icon name="lamp" size="large" >}} lamp
- {{< icon name="duplicate" size="large" >}} duplicate
- {{< icon name="piggy-bank" size="large" >}} piggy-bank
- {{< icon name="scissors" size="large" >}} scissors
- {{< icon name="bitcoin" size="large" >}} bitcoin
- {{< icon name="btc" size="large" >}} btc
- {{< icon name="xbt" size="large" >}} xbt
- {{< icon name="yen" size="large" >}} yen
- {{< icon name="jpy" size="large" >}} jpy
- {{< icon name="ruble" size="large" >}} ruble
- {{< icon name="rub" size="large" >}} rub
- {{< icon name="scale" size="large" >}} scale
- {{< icon name="ice-lolly" size="large" >}} ice-lolly
- {{< icon name="ice-lolly-tasted" size="large" >}} ice-lolly-tasted
- {{< icon name="education" size="large" >}} education
- {{< icon name="option-horizontal" size="large" >}} option-horizontal
- {{< icon name="option-vertical" size="large" >}} option-vertical
- {{< icon name="menu-hamburger" size="large" >}} menu-hamburger
- {{< icon name="modal-window" size="large" >}} modal-window
- {{< icon name="oil" size="large" >}} oil
- {{< icon name="grain" size="large" >}} grain
- {{< icon name="sunglasses" size="large" >}} sunglasses
- {{< icon name="text-size" size="large" >}} text-size
- {{< icon name="text-color" size="large" >}} text-color
- {{< icon name="text-background" size="large" >}} text-background
- {{< icon name="object-align-top" size="large" >}} object-align-top
- {{< icon name="object-align-bottom" size="large" >}} object-align-bottom
- {{< icon name="object-align-horizontal" size="large" >}} object-align-horizontal
- {{< icon name="object-align-left" size="large" >}} object-align-left
- {{< icon name="object-align-vertical" size="large" >}} object-align-vertical
- {{< icon name="object-align-right" size="large" >}} object-align-right
- {{< icon name="triangle-right" size="large" >}} triangle-right
- {{< icon name="triangle-left" size="large" >}} triangle-left
- {{< icon name="triangle-bottom" size="large" >}} triangle-bottom
- {{< icon name="triangle-top" size="large" >}} triangle-top
- {{< icon name="console" size="large" >}} console
- {{< icon name="superscript" size="large" >}} superscript
- {{< icon name="subscript" size="large" >}} subscript
- {{< icon name="menu-left" size="large" >}} menu-left
- {{< icon name="menu-right" size="large" >}} menu-right
- {{< icon name="menu-down" size="large" >}} menu-down
- {{< icon name="menu-up" size="large" >}} menu-up
### Web Application Icons
- {{< icon fa-address-book >}} fa-address-book
- {{< icon fa-address-book-o >}} fa-address-book-o
- {{< icon fa-address-card >}} fa-address-card
- {{< icon fa-address-card-o >}} fa-address-card-o
- {{< icon fa-adjust >}} fa-adjust
- {{< icon fa-american-sign-language-interpreting >}} fa-american-sign-language-interpreting
- {{< icon fa-anchor >}} fa-anchor
- {{< icon fa-archive >}} fa-archive
- {{< icon fa-area-chart >}} fa-area-chart
- {{< icon fa-arrows >}} fa-arrows
- {{< icon fa-arrows-h >}} fa-arrows-h
- {{< icon fa-arrows-v >}} fa-arrows-v
- {{< icon fa-asl-interpreting >}} fa-asl-interpreting (alias)
- {{< icon fa-assistive-listening-systems >}} fa-assistive-listening-systems
- {{< icon fa-asterisk >}} fa-asterisk
- {{< icon fa-at >}} fa-at
- {{< icon fa-audio-description >}} fa-audio-description
- {{< icon fa-automobile >}} fa-automobile (alias)
- {{< icon fa-balance-scale >}} fa-balance-scale
- {{< icon fa-ban >}} fa-ban
- {{< icon fa-bank >}} fa-bank (alias)
- {{< icon fa-bar-chart >}} fa-bar-chart
- {{< icon fa-bar-chart-o >}} fa-bar-chart-o (alias)
- {{< icon fa-barcode >}} fa-barcode
- {{< icon fa-bars >}} fa-bars
- {{< icon fa-bath >}} fa-bath
- {{< icon fa-bathtub >}} fa-bathtub (alias)
- {{< icon fa-battery >}} fa-battery (alias)
- {{< icon fa-battery-0 >}} fa-battery-0 (alias)
- {{< icon fa-battery-1 >}} fa-battery-1 (alias)
- {{< icon fa-battery-2 >}} fa-battery-2 (alias)
- {{< icon fa-battery-3 >}} fa-battery-3 (alias)
- {{< icon fa-battery-4 >}} fa-battery-4 (alias)
- {{< icon fa-battery-empty >}} fa-battery-empty
- {{< icon fa-battery-full >}} fa-battery-full
- {{< icon fa-battery-half >}} fa-battery-half
- {{< icon fa-battery-quarter >}} fa-battery-quarter
- {{< icon fa-battery-three-quarters >}} fa-battery-three-quarters
- {{< icon fa-bed >}} fa-bed
- {{< icon fa-beer >}} fa-beer
- {{< icon fa-bell >}} fa-bell
- {{< icon fa-bell-o >}} fa-bell-o
- {{< icon fa-bell-slash >}} fa-bell-slash
- {{< icon fa-bell-slash-o >}} fa-bell-slash-o
- {{< icon fa-bicycle >}} fa-bicycle
- {{< icon fa-binoculars >}} fa-binoculars
- {{< icon fa-birthday-cake >}} fa-birthday-cake
- {{< icon fa-blind >}} fa-blind
- {{< icon fa-bluetooth >}} fa-bluetooth
- {{< icon fa-bluetooth-b >}} fa-bluetooth-b
- {{< icon fa-bolt >}} fa-bolt
- {{< icon fa-bomb >}} fa-bomb
- {{< icon fa-book >}} fa-book
- {{< icon fa-bookmark >}} fa-bookmark
- {{< icon fa-bookmark-o >}} fa-bookmark-o
- {{< icon fa-braille >}} fa-braille
- {{< icon fa-briefcase >}} fa-briefcase
- {{< icon fa-bug >}} fa-bug
- {{< icon fa-building >}} fa-building
- {{< icon fa-building-o >}} fa-building-o
- {{< icon fa-bullhorn >}} fa-bullhorn
- {{< icon fa-bullseye >}} fa-bullseye
- {{< icon fa-bus >}} fa-bus
- {{< icon fa-cab >}} fa-cab (alias)
- {{< icon fa-calculator >}} fa-calculator
- {{< icon fa-calendar >}} fa-calendar
- {{< icon fa-calendar-check-o >}} fa-calendar-check-o
- {{< icon fa-calendar-minus-o >}} fa-calendar-minus-o
- {{< icon fa-calendar-o >}} fa-calendar-o
- {{< icon fa-calendar-plus-o >}} fa-calendar-plus-o
- {{< icon fa-calendar-times-o >}} fa-calendar-times-o
- {{< icon fa-camera >}} fa-camera
- {{< icon fa-camera-retro >}} fa-camera-retro
- {{< icon fa-car >}} fa-car
- {{< icon fa-caret-square-o-down >}} fa-caret-square-o-down
- {{< icon fa-caret-square-o-left >}} fa-caret-square-o-left
- {{< icon fa-caret-square-o-right >}} fa-caret-square-o-right
- {{< icon fa-caret-square-o-up >}} fa-caret-square-o-up
- {{< icon fa-cart-arrow-down >}} fa-cart-arrow-down
- {{< icon fa-cart-plus >}} fa-cart-plus
- {{< icon fa-cc >}} fa-cc
- {{< icon fa-certificate >}} fa-certificate
- {{< icon fa-check >}} fa-check
- {{< icon fa-check-circle >}} fa-check-circle
- {{< icon fa-check-circle-o >}} fa-check-circle-o
- {{< icon fa-check-square >}} fa-check-square
- {{< icon fa-check-square-o >}} fa-check-square-o
- {{< icon fa-child >}} fa-child
- {{< icon fa-circle >}} fa-circle
- {{< icon fa-circle-o >}} fa-circle-o
- {{< icon fa-circle-o-notch >}} fa-circle-o-notch
- {{< icon fa-circle-thin >}} fa-circle-thin
- {{< icon fa-clock-o >}} fa-clock-o
- {{< icon fa-clone >}} fa-clone
- {{< icon fa-close >}} fa-close (alias)
- {{< icon fa-cloud >}} fa-cloud
- {{< icon fa-cloud-download >}} fa-cloud-download
- {{< icon fa-cloud-upload >}} fa-cloud-upload
- {{< icon fa-code >}} fa-code
- {{< icon fa-code-fork >}} fa-code-fork
- {{< icon fa-coffee >}} fa-coffee
- {{< icon fa-cog >}} fa-cog
- {{< icon fa-cogs >}} fa-cogs
- {{< icon fa-comment >}} fa-comment
- {{< icon fa-comment-o >}} fa-comment-o
- {{< icon fa-commenting >}} fa-commenting
- {{< icon fa-commenting-o >}} fa-commenting-o
- {{< icon fa-comments >}} fa-comments
- {{< icon fa-comments-o >}} fa-comments-o
- {{< icon fa-compass >}} fa-compass
- {{< icon fa-copyright >}} fa-copyright
- {{< icon fa-creative-commons >}} fa-creative-commons
- {{< icon fa-credit-card >}} fa-credit-card
- {{< icon fa-credit-card-alt >}} fa-credit-card-alt
- {{< icon fa-crop >}} fa-crop
- {{< icon fa-crosshairs >}} fa-crosshairs
- {{< icon fa-cube >}} fa-cube
- {{< icon fa-cubes >}} fa-cubes
- {{< icon fa-cutlery >}} fa-cutlery
- {{< icon fa-dashboard >}} fa-dashboard (alias)
- {{< icon fa-database >}} fa-database
- {{< icon fa-deaf >}} fa-deaf
- {{< icon fa-deafness >}} fa-deafness (alias)
- {{< icon fa-desktop >}} fa-desktop
- {{< icon fa-diamond >}} fa-diamond
- {{< icon fa-dot-circle-o >}} fa-dot-circle-o
- {{< icon fa-download >}} fa-download
- {{< icon fa-drivers-license >}} fa-drivers-license (alias)
- {{< icon fa-drivers-license-o >}} fa-drivers-license-o (alias)
- {{< icon fa-edit >}} fa-edit (alias)
- {{< icon fa-ellipsis-h >}} fa-ellipsis-h
- {{< icon fa-ellipsis-v >}} fa-ellipsis-v
- {{< icon fa-envelope >}} fa-envelope
- {{< icon fa-envelope-o >}} fa-envelope-o
- {{< icon fa-envelope-open >}} fa-envelope-open
- {{< icon fa-envelope-open-o >}} fa-envelope-open-o
- {{< icon fa-envelope-square >}} fa-envelope-square
- {{< icon fa-eraser >}} fa-eraser
- {{< icon fa-exchange >}} fa-exchange
- {{< icon fa-exclamation >}} fa-exclamation
- {{< icon fa-exclamation-circle >}} fa-exclamation-circle
- {{< icon fa-exclamation-triangle >}} fa-exclamation-triangle
- {{< icon fa-external-link >}} fa-external-link
- {{< icon fa-external-link-square >}} fa-external-link-square
- {{< icon fa-eye >}} fa-eye
- {{< icon fa-eye-slash >}} fa-eye-slash
- {{< icon fa-eyedropper >}} fa-eyedropper
- {{< icon fa-fax >}} fa-fax
- {{< icon fa-feed >}} fa-feed (alias)
- {{< icon fa-female >}} fa-female
- {{< icon fa-fighter-jet >}} fa-fighter-jet
- {{< icon fa-file-archive-o >}} fa-file-archive-o
- {{< icon fa-file-audio-o >}} fa-file-audio-o
- {{< icon fa-file-code-o >}} fa-file-code-o
- {{< icon fa-file-excel-o >}} fa-file-excel-o
- {{< icon fa-file-image-o >}} fa-file-image-o
- {{< icon fa-file-movie-o >}} fa-file-movie-o (alias)
- {{< icon fa-file-pdf-o >}} fa-file-pdf-o
- {{< icon fa-file-photo-o >}} fa-file-photo-o (alias)
- {{< icon fa-file-picture-o >}} fa-file-picture-o (alias)
- {{< icon fa-file-powerpoint-o >}} fa-file-powerpoint-o
- {{< icon fa-file-sound-o >}} fa-file-sound-o (alias)
- {{< icon fa-file-video-o >}} fa-file-video-o
- {{< icon fa-file-word-o >}} fa-file-word-o
- {{< icon fa-file-zip-o >}} fa-file-zip-o (alias)
- {{< icon fa-film >}} fa-film
- {{< icon fa-filter >}} fa-filter
- {{< icon fa-fire >}} fa-fire
- {{< icon fa-fire-extinguisher >}} fa-fire-extinguisher
- {{< icon fa-flag >}} fa-flag
- {{< icon fa-flag-checkered >}} fa-flag-checkered
- {{< icon fa-flag-o >}} fa-flag-o
- {{< icon fa-flash >}} fa-flash (alias)
- {{< icon fa-flask >}} fa-flask
- {{< icon fa-folder >}} fa-folder
- {{< icon fa-folder-o >}} fa-folder-o
- {{< icon fa-folder-open >}} fa-folder-open
- {{< icon fa-folder-open-o >}} fa-folder-open-o
- {{< icon fa-frown-o >}} fa-frown-o
- {{< icon fa-futbol-o >}} fa-futbol-o
- {{< icon fa-gamepad >}} fa-gamepad
- {{< icon fa-gavel >}} fa-gavel
- {{< icon fa-gear >}} fa-gear (alias)
- {{< icon fa-gears >}} fa-gears (alias)
- {{< icon fa-gift >}} fa-gift
- {{< icon fa-glass >}} fa-glass
- {{< icon fa-globe >}} fa-globe
- {{< icon fa-graduation-cap >}} fa-graduation-cap
- {{< icon fa-group >}} fa-group (alias)
- {{< icon fa-hand-grab-o >}} fa-hand-grab-o (alias)
- {{< icon fa-hand-lizard-o >}} fa-hand-lizard-o
- {{< icon fa-hand-paper-o >}} fa-hand-paper-o
- {{< icon fa-hand-peace-o >}} fa-hand-peace-o
- {{< icon fa-hand-pointer-o >}} fa-hand-pointer-o
- {{< icon fa-hand-rock-o >}} fa-hand-rock-o
- {{< icon fa-hand-scissors-o >}} fa-hand-scissors-o
- {{< icon fa-hand-spock-o >}} fa-hand-spock-o
- {{< icon fa-hand-stop-o >}} fa-hand-stop-o (alias)
- {{< icon fa-handshake-o >}} fa-handshake-o
- {{< icon fa-hard-of-hearing >}} fa-hard-of-hearing (alias)
- {{< icon fa-hashtag >}} fa-hashtag
- {{< icon fa-hdd-o >}} fa-hdd-o
- {{< icon fa-headphones >}} fa-headphones
- {{< icon fa-heart >}} fa-heart
- {{< icon fa-heart-o >}} fa-heart-o
- {{< icon fa-heartbeat >}} fa-heartbeat
- {{< icon fa-history >}} fa-history
- {{< icon fa-home >}} fa-home
- {{< icon fa-hotel >}} fa-hotel (alias)
- {{< icon fa-hourglass >}} fa-hourglass
- {{< icon fa-hourglass-1 >}} fa-hourglass-1 (alias)
- {{< icon fa-hourglass-2 >}} fa-hourglass-2 (alias)
- {{< icon fa-hourglass-3 >}} fa-hourglass-3 (alias)
- {{< icon fa-hourglass-end >}} fa-hourglass-end
- {{< icon fa-hourglass-half >}} fa-hourglass-half
- {{< icon fa-hourglass-o >}} fa-hourglass-o
- {{< icon fa-hourglass-start >}} fa-hourglass-start
- {{< icon fa-i-cursor >}} fa-i-cursor
- {{< icon fa-id-badge >}} fa-id-badge
- {{< icon fa-id-card >}} fa-id-card
- {{< icon fa-id-card-o >}} fa-id-card-o
- {{< icon fa-image >}} fa-image (alias)
- {{< icon fa-inbox >}} fa-inbox
- {{< icon fa-industry >}} fa-industry
- {{< icon fa-info >}} fa-info
- {{< icon fa-info-circle >}} fa-info-circle
- {{< icon fa-institution >}} fa-institution (alias)
- {{< icon fa-key >}} fa-key
- {{< icon fa-keyboard-o >}} fa-keyboard-o
- {{< icon fa-language >}} fa-language
- {{< icon fa-laptop >}} fa-laptop
- {{< icon fa-leaf >}} fa-leaf
- {{< icon fa-legal >}} fa-legal (alias)
- {{< icon fa-lemon-o >}} fa-lemon-o
- {{< icon fa-level-down >}} fa-level-down
- {{< icon fa-level-up >}} fa-level-up
- {{< icon fa-life-bouy >}} fa-life-bouy (alias)
- {{< icon fa-life-buoy >}} fa-life-buoy (alias)
- {{< icon fa-life-ring >}} fa-life-ring
- {{< icon fa-life-saver >}} fa-life-saver (alias)
- {{< icon fa-lightbulb-o >}} fa-lightbulb-o
- {{< icon fa-line-chart >}} fa-line-chart
- {{< icon fa-location-arrow >}} fa-location-arrow
- {{< icon fa-lock >}} fa-lock
- {{< icon fa-low-vision >}} fa-low-vision
- {{< icon fa-magic >}} fa-magic
- {{< icon fa-magnet >}} fa-magnet
- {{< icon fa-mail-forward >}} fa-mail-forward (alias)
- {{< icon fa-mail-reply >}} fa-mail-reply (alias)
- {{< icon fa-mail-reply-all >}} fa-mail-reply-all (alias)
- {{< icon fa-male >}} fa-male
- {{< icon fa-map >}} fa-map
- {{< icon fa-map-marker >}} fa-map-marker
- {{< icon fa-map-o >}} fa-map-o
- {{< icon fa-map-pin >}} fa-map-pin
- {{< icon fa-map-signs >}} fa-map-signs
- {{< icon fa-meh-o >}} fa-meh-o
- {{< icon fa-microchip >}} fa-microchip
- {{< icon fa-microphone >}} fa-microphone
- {{< icon fa-microphone-slash >}} fa-microphone-slash
- {{< icon fa-minus >}} fa-minus
- {{< icon fa-minus-circle >}} fa-minus-circle
- {{< icon fa-minus-square >}} fa-minus-square
- {{< icon fa-minus-square-o >}} fa-minus-square-o
- {{< icon fa-mobile >}} fa-mobile
- {{< icon fa-mobile-phone >}} fa-mobile-phone (alias)
- {{< icon fa-money >}} fa-money
- {{< icon fa-moon-o >}} fa-moon-o
- {{< icon fa-mortar-board >}} fa-mortar-board (alias)
- {{< icon fa-motorcycle >}} fa-motorcycle
- {{< icon fa-mouse-pointer >}} fa-mouse-pointer
- {{< icon fa-music >}} fa-music
- {{< icon fa-navicon >}} fa-navicon (alias)
- {{< icon fa-newspaper-o >}} fa-newspaper-o
- {{< icon fa-object-group >}} fa-object-group
- {{< icon fa-object-ungroup >}} fa-object-ungroup
- {{< icon fa-paint-brush >}} fa-paint-brush
- {{< icon fa-paper-plane >}} fa-paper-plane
- {{< icon fa-paper-plane-o >}} fa-paper-plane-o
- {{< icon fa-paw >}} fa-paw
- {{< icon fa-pencil >}} fa-pencil
- {{< icon fa-pencil-square >}} fa-pencil-square
- {{< icon fa-pencil-square-o >}} fa-pencil-square-o
- {{< icon fa-percent >}} fa-percent
- {{< icon fa-phone >}} fa-phone
- {{< icon fa-phone-square >}} fa-phone-square
- {{< icon fa-photo >}} fa-photo (alias)
- {{< icon fa-picture-o >}} fa-picture-o
- {{< icon fa-pie-chart >}} fa-pie-chart
- {{< icon fa-plane >}} fa-plane
- {{< icon fa-plug >}} fa-plug
- {{< icon fa-plus >}} fa-plus
- {{< icon fa-plus-circle >}} fa-plus-circle
- {{< icon fa-plus-square >}} fa-plus-square
- {{< icon fa-plus-square-o >}} fa-plus-square-o
- {{< icon fa-podcast >}} fa-podcast
- {{< icon fa-power-off >}} fa-power-off
- {{< icon fa-print >}} fa-print
- {{< icon fa-puzzle-piece >}} fa-puzzle-piece
- {{< icon fa-qrcode >}} fa-qrcode
- {{< icon fa-question >}} fa-question
- {{< icon fa-question-circle >}} fa-question-circle
- {{< icon fa-question-circle-o >}} fa-question-circle-o
- {{< icon fa-quote-left >}} fa-quote-left
- {{< icon fa-quote-right >}} fa-quote-right
- {{< icon fa-random >}} fa-random
- {{< icon fa-recycle >}} fa-recycle
- {{< icon fa-refresh >}} fa-refresh
- {{< icon fa-registered >}} fa-registered
- {{< icon fa-remove >}} fa-remove (alias)
- {{< icon fa-reorder >}} fa-reorder (alias)
- {{< icon fa-reply >}} fa-reply
- {{< icon fa-reply-all >}} fa-reply-all
- {{< icon fa-retweet >}} fa-retweet
- {{< icon fa-road >}} fa-road
- {{< icon fa-rocket >}} fa-rocket
- {{< icon fa-rss >}} fa-rss
- {{< icon fa-rss-square >}} fa-rss-square
- {{< icon fa-s15 >}} fa-s15 (alias)
- {{< icon fa-search >}} fa-search
- {{< icon fa-search-minus >}} fa-search-minus
- {{< icon fa-search-plus >}} fa-search-plus
- {{< icon fa-send >}} fa-send (alias)
- {{< icon fa-send-o >}} fa-send-o (alias)
- {{< icon fa-server >}} fa-server
- {{< icon fa-share >}} fa-share
- {{< icon fa-share-alt >}} fa-share-alt
- {{< icon fa-share-alt-square >}} fa-share-alt-square
- {{< icon fa-share-square >}} fa-share-square
- {{< icon fa-share-square-o >}} fa-share-square-o
- {{< icon fa-shield >}} fa-shield
- {{< icon fa-ship >}} fa-ship
- {{< icon fa-shopping-bag >}} fa-shopping-bag
- {{< icon fa-shopping-basket >}} fa-shopping-basket
- {{< icon fa-shopping-cart >}} fa-shopping-cart
- {{< icon fa-shower >}} fa-shower
- {{< icon fa-sign-in >}} fa-sign-in
- {{< icon fa-sign-language >}} fa-sign-language
- {{< icon fa-sign-out >}} fa-sign-out
- {{< icon fa-signal >}} fa-signal
- {{< icon fa-signing >}} fa-signing (alias)
- {{< icon fa-sitemap >}} fa-sitemap
- {{< icon fa-sliders >}} fa-sliders
- {{< icon fa-smile-o >}} fa-smile-o
- {{< icon fa-snowflake-o >}} fa-snowflake-o
- {{< icon fa-soccer-ball-o >}} fa-soccer-ball-o (alias)
- {{< icon fa-sort >}} fa-sort
- {{< icon fa-sort-alpha-asc >}} fa-sort-alpha-asc
- {{< icon fa-sort-alpha-desc >}} fa-sort-alpha-desc
- {{< icon fa-sort-amount-asc >}} fa-sort-amount-asc
- {{< icon fa-sort-amount-desc >}} fa-sort-amount-desc
- {{< icon fa-sort-asc >}} fa-sort-asc
- {{< icon fa-sort-desc >}} fa-sort-desc
- {{< icon fa-sort-down >}} fa-sort-down (alias)
- {{< icon fa-sort-numeric-asc >}} fa-sort-numeric-asc
- {{< icon fa-sort-numeric-desc >}} fa-sort-numeric-desc
- {{< icon fa-sort-up >}} fa-sort-up (alias)
- {{< icon fa-space-shuttle >}} fa-space-shuttle
- {{< icon fa-spinner >}} fa-spinner
- {{< icon fa-spoon >}} fa-spoon
- {{< icon fa-square >}} fa-square
- {{< icon fa-square-o >}} fa-square-o
- {{< icon fa-star >}} fa-star
- {{< icon fa-star-half >}} fa-star-half
- {{< icon fa-star-half-empty >}} fa-star-half-empty (alias)
- {{< icon fa-star-half-full >}} fa-star-half-full (alias)
- {{< icon fa-star-half-o >}} fa-star-half-o
- {{< icon fa-star-o >}} fa-star-o
- {{< icon fa-sticky-note >}} fa-sticky-note
- {{< icon fa-sticky-note-o >}} fa-sticky-note-o
- {{< icon fa-street-view >}} fa-street-view
- {{< icon fa-suitcase >}} fa-suitcase
- {{< icon fa-sun-o >}} fa-sun-o
- {{< icon fa-support >}} fa-support (alias)
- {{< icon fa-tablet >}} fa-tablet
- {{< icon fa-tachometer >}} fa-tachometer
- {{< icon fa-tag >}} fa-tag
- {{< icon fa-tags >}} fa-tags
- {{< icon fa-tasks >}} fa-tasks
- {{< icon fa-taxi >}} fa-taxi
- {{< icon fa-television >}} fa-television
- {{< icon fa-terminal >}} fa-terminal
- {{< icon fa-thermometer >}} fa-thermometer (alias)
- {{< icon fa-thermometer-0 >}} fa-thermometer-0 (alias)
- {{< icon fa-thermometer-1 >}} fa-thermometer-1 (alias)
- {{< icon fa-thermometer-2 >}} fa-thermometer-2 (alias)
- {{< icon fa-thermometer-3 >}} fa-thermometer-3 (alias)
- {{< icon fa-thermometer-4 >}} fa-thermometer-4 (alias)
- {{< icon fa-thermometer-empty >}} fa-thermometer-empty
- {{< icon fa-thermometer-full >}} fa-thermometer-full
- {{< icon fa-thermometer-half >}} fa-thermometer-half
- {{< icon fa-thermometer-quarter >}} fa-thermometer-quarter
- {{< icon fa-thermometer-three-quarters >}} fa-thermometer-three-quarters
- {{< icon fa-thumb-tack >}} fa-thumb-tack
- {{< icon fa-thumbs-down >}} fa-thumbs-down
- {{< icon fa-thumbs-o-down >}} fa-thumbs-o-down
- {{< icon fa-thumbs-o-up >}} fa-thumbs-o-up
- {{< icon fa-thumbs-up >}} fa-thumbs-up
- {{< icon fa-ticket >}} fa-ticket
- {{< icon fa-times >}} fa-times
- {{< icon fa-times-circle >}} fa-times-circle
- {{< icon fa-times-circle-o >}} fa-times-circle-o
- {{< icon fa-times-rectangle >}} fa-times-rectangle (alias)
- {{< icon fa-times-rectangle-o >}} fa-times-rectangle-o (alias)
- {{< icon fa-tint >}} fa-tint
- {{< icon fa-toggle-down >}} fa-toggle-down (alias)
- {{< icon fa-toggle-left >}} fa-toggle-left (alias)
- {{< icon fa-toggle-off >}} fa-toggle-off
- {{< icon fa-toggle-on >}} fa-toggle-on
- {{< icon fa-toggle-right >}} fa-toggle-right (alias)
- {{< icon fa-toggle-up >}} fa-toggle-up (alias)
- {{< icon fa-trademark >}} fa-trademark
- {{< icon fa-trash >}} fa-trash
- {{< icon fa-trash-o >}} fa-trash-o
- {{< icon fa-tree >}} fa-tree
- {{< icon fa-trophy >}} fa-trophy
- {{< icon fa-truck >}} fa-truck
- {{< icon fa-tty >}} fa-tty
- {{< icon fa-tv >}} fa-tv (alias)
- {{< icon fa-umbrella >}} fa-umbrella
- {{< icon fa-universal-access >}} fa-universal-access
- {{< icon fa-university >}} fa-university
- {{< icon fa-unlock >}} fa-unlock
- {{< icon fa-unlock-alt >}} fa-unlock-alt
- {{< icon fa-unsorted >}} fa-unsorted (alias)
- {{< icon fa-upload >}} fa-upload
- {{< icon fa-user >}} fa-user
- {{< icon fa-user-circle >}} fa-user-circle
- {{< icon fa-user-circle-o >}} fa-user-circle-o
- {{< icon fa-user-o >}} fa-user-o
- {{< icon fa-user-plus >}} fa-user-plus
- {{< icon fa-user-secret >}} fa-user-secret
- {{< icon fa-user-times >}} fa-user-times
- {{< icon fa-users >}} fa-users
- {{< icon fa-vcard >}} fa-vcard (alias)
- {{< icon fa-vcard-o >}} fa-vcard-o (alias)
- {{< icon fa-video-camera >}} fa-video-camera
- {{< icon fa-volume-control-phone >}} fa-volume-control-phone
- {{< icon fa-volume-down >}} fa-volume-down
- {{< icon fa-volume-off >}} fa-volume-off
- {{< icon fa-volume-up >}} fa-volume-up
- {{< icon fa-warning >}} fa-warning (alias)
- {{< icon fa-wheelchair >}} fa-wheelchair
- {{< icon fa-wheelchair-alt >}} fa-wheelchair-alt
- {{< icon fa-wifi >}} fa-wifi
- {{< icon fa-window-close >}} fa-window-close
- {{< icon fa-window-close-o >}} fa-window-close-o
- {{< icon fa-window-maximize >}} fa-window-maximize
- {{< icon fa-window-minimize >}} fa-window-minimize
- {{< icon fa-window-restore >}} fa-window-restore
- {{< icon fa-wrench >}} fa-wrench
### Accessibility Icons
- {{< icon fa-american-sign-language-interpreting >}} fa-american-sign-language-interpreting
- {{< icon fa-asl-interpreting >}} fa-asl-interpreting (alias)
- {{< icon fa-assistive-listening-systems >}} fa-assistive-listening-systems
- {{< icon fa-audio-description >}} fa-audio-description
- {{< icon fa-blind >}} fa-blind
- {{< icon fa-braille >}} fa-braille
- {{< icon fa-cc >}} fa-cc
- {{< icon fa-deaf >}} fa-deaf
- {{< icon fa-deafness >}} fa-deafness (alias)
- {{< icon fa-hard-of-hearing >}} fa-hard-of-hearing (alias)
- {{< icon fa-low-vision >}} fa-low-vision
- {{< icon fa-question-circle-o >}} fa-question-circle-o
- {{< icon fa-sign-language >}} fa-sign-language
- {{< icon fa-signing >}} fa-signing (alias)
- {{< icon fa-tty >}} fa-tty
- {{< icon fa-universal-access >}} fa-universal-access
- {{< icon fa-volume-control-phone >}} fa-volume-control-phone
- {{< icon fa-wheelchair >}} fa-wheelchair
- {{< icon fa-wheelchair-alt >}} fa-wheelchair-alt
### Hand Icons
- {{< icon fa-hand-grab-o >}} fa-hand-grab-o (alias)
- {{< icon fa-hand-lizard-o >}} fa-hand-lizard-o
- {{< icon fa-hand-o-down >}} fa-hand-o-down
- {{< icon fa-hand-o-left >}} fa-hand-o-left
- {{< icon fa-hand-o-right >}} fa-hand-o-right
- {{< icon fa-hand-o-up >}} fa-hand-o-up
- {{< icon fa-hand-paper-o >}} fa-hand-paper-o
- {{< icon fa-hand-peace-o >}} fa-hand-peace-o
- {{< icon fa-hand-pointer-o >}} fa-hand-pointer-o
- {{< icon fa-hand-rock-o >}} fa-hand-rock-o
- {{< icon fa-hand-scissors-o >}} fa-hand-scissors-o
- {{< icon fa-hand-spock-o >}} fa-hand-spock-o
- {{< icon fa-hand-stop-o >}} fa-hand-stop-o (alias)
- {{< icon fa-thumbs-down >}} fa-thumbs-down
- {{< icon fa-thumbs-o-down >}} fa-thumbs-o-down
- {{< icon fa-thumbs-o-up >}} fa-thumbs-o-up
- {{< icon fa-thumbs-up >}} fa-thumbs-up
### Transportation Icons
- {{< icon fa-ambulance >}} fa-ambulance
- {{< icon fa-automobile >}} fa-automobile (alias)
- {{< icon fa-bicycle >}} fa-bicycle
- {{< icon fa-bus >}} fa-bus
- {{< icon fa-cab >}} fa-cab (alias)
- {{< icon fa-car >}} fa-car
- {{< icon fa-fighter-jet >}} fa-fighter-jet
- {{< icon fa-motorcycle >}} fa-motorcycle
- {{< icon fa-plane >}} fa-plane
- {{< icon fa-rocket >}} fa-rocket
- {{< icon fa-ship >}} fa-ship
- {{< icon fa-space-shuttle >}} fa-space-shuttle
- {{< icon fa-subway >}} fa-subway
- {{< icon fa-taxi >}} fa-taxi
- {{< icon fa-train >}} fa-train
- {{< icon fa-truck >}} fa-truck
- {{< icon fa-wheelchair >}} fa-wheelchair
- {{< icon fa-wheelchair-alt >}} fa-wheelchair-alt
### Gender Icons
- {{< icon fa-genderless >}} fa-genderless
- {{< icon fa-intersex >}} fa-intersex (alias)
- {{< icon fa-mars >}} fa-mars
- {{< icon fa-mars-double >}} fa-mars-double
- {{< icon fa-mars-stroke >}} fa-mars-stroke
- {{< icon fa-mars-stroke-h >}} fa-mars-stroke-h
- {{< icon fa-mars-stroke-v >}} fa-mars-stroke-v
- {{< icon fa-mercury >}} fa-mercury
- {{< icon fa-neuter >}} fa-neuter
- {{< icon fa-transgender >}} fa-transgender
- {{< icon fa-transgender-alt >}} fa-transgender-alt
- {{< icon fa-venus >}} fa-venus
- {{< icon fa-venus-double >}} fa-venus-double
- {{< icon fa-venus-mars >}} fa-venus-mars
### File Type Icons
- {{< icon fa-file >}} fa-file
- {{< icon fa-file-archive-o >}} fa-file-archive-o
- {{< icon fa-file-audio-o >}} fa-file-audio-o
- {{< icon fa-file-code-o >}} fa-file-code-o
- {{< icon fa-file-excel-o >}} fa-file-excel-o
- {{< icon fa-file-image-o >}} fa-file-image-o
- {{< icon fa-file-movie-o >}} fa-file-movie-o (alias)
- {{< icon fa-file-o >}} fa-file-o
- {{< icon fa-file-pdf-o >}} fa-file-pdf-o
- {{< icon fa-file-photo-o >}} fa-file-photo-o (alias)
- {{< icon fa-file-picture-o >}} fa-file-picture-o (alias)
- {{< icon fa-file-powerpoint-o >}} fa-file-powerpoint-o
- {{< icon fa-file-sound-o >}} fa-file-sound-o (alias)
- {{< icon fa-file-text >}} fa-file-text
- {{< icon fa-file-text-o >}} fa-file-text-o
- {{< icon fa-file-video-o >}} fa-file-video-o
- {{< icon fa-file-word-o >}} fa-file-word-o
- {{< icon fa-file-zip-o >}} fa-file-zip-o (alias)
### Spinner Icons
- {{< icon fa-circle-o-notch >}} fa-circle-o-notch
- {{< icon fa-cog >}} fa-cog
- {{< icon fa-gear >}} fa-gear (alias)
- {{< icon fa-refresh >}} fa-refresh
- {{< icon fa-spinner >}} fa-spinner
### Form Control Icons
- {{< icon fa-check-square >}} fa-check-square
- {{< icon fa-check-square-o >}} fa-check-square-o
- {{< icon fa-circle >}} fa-circle
- {{< icon fa-circle-o >}} fa-circle-o
- {{< icon fa-dot-circle-o >}} fa-dot-circle-o
- {{< icon fa-minus-square >}} fa-minus-square
- {{< icon fa-minus-square-o >}} fa-minus-square-o
- {{< icon fa-plus-square >}} fa-plus-square
- {{< icon fa-plus-square-o >}} fa-plus-square-o
- {{< icon fa-square >}} fa-square
- {{< icon fa-square-o >}} fa-square-o
### Payment Icons
- {{< icon fa-cc-amex >}} fa-cc-amex
- {{< icon fa-cc-diners-club >}} fa-cc-diners-club
- {{< icon fa-cc-discover >}} fa-cc-discover
- {{< icon fa-cc-jcb >}} fa-cc-jcb
- {{< icon fa-cc-mastercard >}} fa-cc-mastercard
- {{< icon fa-cc-paypal >}} fa-cc-paypal
- {{< icon fa-cc-stripe >}} fa-cc-stripe
- {{< icon fa-cc-visa >}} fa-cc-visa
- {{< icon fa-credit-card >}} fa-credit-card
- {{< icon fa-credit-card-alt >}} fa-credit-card-alt
- {{< icon fa-google-wallet >}} fa-google-wallet
- {{< icon fa-paypal >}} fa-paypal
### Chart Icons
- {{< icon fa-area-chart >}} fa-area-chart
- {{< icon fa-bar-chart >}} fa-bar-chart
- {{< icon fa-bar-chart-o >}} fa-bar-chart-o (alias)
- {{< icon fa-line-chart >}} fa-line-chart
- {{< icon fa-pie-chart >}} fa-pie-chart
### Currency Icons
- {{< icon fa-bitcoin >}} fa-bitcoin (alias)
- {{< icon fa-btc >}} fa-btc
- {{< icon fa-cny >}} fa-cny (alias)
- {{< icon fa-dollar >}} fa-dollar (alias)
- {{< icon fa-eur >}} fa-eur
- {{< icon fa-euro >}} fa-euro (alias)
- {{< icon fa-gbp >}} fa-gbp
- {{< icon fa-gg >}} fa-gg
- {{< icon fa-gg-circle >}} fa-gg-circle
- {{< icon fa-ils >}} fa-ils
- {{< icon fa-inr >}} fa-inr
- {{< icon fa-jpy >}} fa-jpy
- {{< icon fa-krw >}} fa-krw
- {{< icon fa-money >}} fa-money
- {{< icon fa-rmb >}} fa-rmb (alias)
- {{< icon fa-rouble >}} fa-rouble (alias)
- {{< icon fa-rub >}} fa-rub
- {{< icon fa-ruble >}} fa-ruble (alias)
- {{< icon fa-rupee >}} fa-rupee (alias)
- {{< icon fa-shekel >}} fa-shekel (alias)
- {{< icon fa-sheqel >}} fa-sheqel (alias)
- {{< icon fa-try >}} fa-try
- {{< icon fa-turkish-lira >}} fa-turkish-lira (alias)
- {{< icon fa-usd >}} fa-usd
- {{< icon fa-won >}} fa-won (alias)
- {{< icon fa-yen >}} fa-yen (alias)
### Text Editor Icons
- {{< icon fa-align-center >}} fa-align-center
- {{< icon fa-align-justify >}} fa-align-justify
- {{< icon fa-align-left >}} fa-align-left
- {{< icon fa-align-right >}} fa-align-right
- {{< icon fa-bold >}} fa-bold
- {{< icon fa-chain >}} fa-chain (alias)
- {{< icon fa-chain-broken >}} fa-chain-broken
- {{< icon fa-clipboard >}} fa-clipboard
- {{< icon fa-columns >}} fa-columns
- {{< icon fa-copy >}} fa-copy (alias)
- {{< icon fa-cut >}} fa-cut (alias)
- {{< icon fa-dedent >}} fa-dedent (alias)
- {{< icon fa-eraser >}} fa-eraser
- {{< icon fa-file >}} fa-file
- {{< icon fa-file-o >}} fa-file-o
- {{< icon fa-file-text >}} fa-file-text
- {{< icon fa-file-text-o >}} fa-file-text-o
- {{< icon fa-files-o >}} fa-files-o
- {{< icon fa-floppy-o >}} fa-floppy-o
- {{< icon fa-font >}} fa-font
- {{< icon fa-header >}} fa-header
- {{< icon fa-indent >}} fa-indent
- {{< icon fa-italic >}} fa-italic
- {{< icon fa-link >}} fa-link
- {{< icon fa-list >}} fa-list
- {{< icon fa-list-alt >}} fa-list-alt
- {{< icon fa-list-ol >}} fa-list-ol
- {{< icon fa-list-ul >}} fa-list-ul
- {{< icon fa-outdent >}} fa-outdent
- {{< icon fa-paperclip >}} fa-paperclip
- {{< icon fa-paragraph >}} fa-paragraph
- {{< icon fa-paste >}} fa-paste (alias)
- {{< icon fa-repeat >}} fa-repeat
- {{< icon fa-rotate-left >}} fa-rotate-left (alias)
- {{< icon fa-rotate-right >}} fa-rotate-right (alias)
- {{< icon fa-save >}} fa-save (alias)
- {{< icon fa-scissors >}} fa-scissors
- {{< icon fa-strikethrough >}} fa-strikethrough
- {{< icon fa-subscript >}} fa-subscript
- {{< icon fa-superscript >}} fa-superscript
- {{< icon fa-table >}} fa-table
- {{< icon fa-text-height >}} fa-text-height
- {{< icon fa-text-width >}} fa-text-width
- {{< icon fa-th >}} fa-th
- {{< icon fa-th-large >}} fa-th-large
- {{< icon fa-th-list >}} fa-th-list
- {{< icon fa-underline >}} fa-underline
- {{< icon fa-undo >}} fa-undo
- {{< icon fa-unlink >}} fa-unlink (alias)
### Directional Icons
- {{< icon fa-angle-double-down >}} fa-angle-double-down
- {{< icon fa-angle-double-left >}} fa-angle-double-left
- {{< icon fa-angle-double-right >}} fa-angle-double-right
- {{< icon fa-angle-double-up >}} fa-angle-double-up
- {{< icon fa-angle-down >}} fa-angle-down
- {{< icon fa-angle-left >}} fa-angle-left
- {{< icon fa-angle-right >}} fa-angle-right
- {{< icon fa-angle-up >}} fa-angle-up
- {{< icon fa-arrow-circle-down >}} fa-arrow-circle-down
- {{< icon fa-arrow-circle-left >}} fa-arrow-circle-left
- {{< icon fa-arrow-circle-o-down >}} fa-arrow-circle-o-down
- {{< icon fa-arrow-circle-o-left >}} fa-arrow-circle-o-left
- {{< icon fa-arrow-circle-o-right >}} fa-arrow-circle-o-right
- {{< icon fa-arrow-circle-o-up >}} fa-arrow-circle-o-up
- {{< icon fa-arrow-circle-right >}} fa-arrow-circle-right
- {{< icon fa-arrow-circle-up >}} fa-arrow-circle-up
- {{< icon fa-arrow-down >}} fa-arrow-down
- {{< icon fa-arrow-left >}} fa-arrow-left
- {{< icon fa-arrow-right >}} fa-arrow-right
- {{< icon fa-arrow-up >}} fa-arrow-up
- {{< icon fa-arrows >}} fa-arrows
- {{< icon fa-arrows-alt >}} fa-arrows-alt
- {{< icon fa-arrows-h >}} fa-arrows-h
- {{< icon fa-arrows-v >}} fa-arrows-v
- {{< icon fa-caret-down >}} fa-caret-down
- {{< icon fa-caret-left >}} fa-caret-left
- {{< icon fa-caret-right >}} fa-caret-right
- {{< icon fa-caret-square-o-down >}} fa-caret-square-o-down
- {{< icon fa-caret-square-o-left >}} fa-caret-square-o-left
- {{< icon fa-caret-square-o-right >}} fa-caret-square-o-right
- {{< icon fa-caret-square-o-up >}} fa-caret-square-o-up
- {{< icon fa-caret-up >}} fa-caret-up
- {{< icon fa-chevron-circle-down >}} fa-chevron-circle-down
- {{< icon fa-chevron-circle-left >}} fa-chevron-circle-left
- {{< icon fa-chevron-circle-right >}} fa-chevron-circle-right
- {{< icon fa-chevron-circle-up >}} fa-chevron-circle-up
- {{< icon fa-chevron-down >}} fa-chevron-down
- {{< icon fa-chevron-left >}} fa-chevron-left
- {{< icon fa-chevron-right >}} fa-chevron-right
- {{< icon fa-chevron-up >}} fa-chevron-up
- {{< icon fa-exchange >}} fa-exchange
- {{< icon fa-hand-o-down >}} fa-hand-o-down
- {{< icon fa-hand-o-left >}} fa-hand-o-left
- {{< icon fa-hand-o-right >}} fa-hand-o-right
- {{< icon fa-hand-o-up >}} fa-hand-o-up
- {{< icon fa-long-arrow-down >}} fa-long-arrow-down
- {{< icon fa-long-arrow-left >}} fa-long-arrow-left
- {{< icon fa-long-arrow-right >}} fa-long-arrow-right
- {{< icon fa-long-arrow-up >}} fa-long-arrow-up
- {{< icon fa-toggle-down >}} fa-toggle-down (alias)
- {{< icon fa-toggle-left >}} fa-toggle-left (alias)
- {{< icon fa-toggle-right >}} fa-toggle-right (alias)
- {{< icon fa-toggle-up >}} fa-toggle-up (alias)
### Video Player Icons
- {{< icon fa-arrows-alt >}} fa-arrows-alt
- {{< icon fa-backward >}} fa-backward
- {{< icon fa-compress >}} fa-compress
- {{< icon fa-eject >}} fa-eject
- {{< icon fa-expand >}} fa-expand
- {{< icon fa-fast-backward >}} fa-fast-backward
- {{< icon fa-fast-forward >}} fa-fast-forward
- {{< icon fa-forward >}} fa-forward
- {{< icon fa-pause >}} fa-pause
- {{< icon fa-pause-circle >}} fa-pause-circle
- {{< icon fa-pause-circle-o >}} fa-pause-circle-o
- {{< icon fa-play >}} fa-play
- {{< icon fa-play-circle >}} fa-play-circle
- {{< icon fa-play-circle-o >}} fa-play-circle-o
- {{< icon fa-random >}} fa-random
- {{< icon fa-step-backward >}} fa-step-backward
- {{< icon fa-step-forward >}} fa-step-forward
- {{< icon fa-stop >}} fa-stop
- {{< icon fa-stop-circle >}} fa-stop-circle
- {{< icon fa-stop-circle-o >}} fa-stop-circle-o
- {{< icon fa-youtube-play >}} fa-youtube-play
### Brand Icons
- {{< icon fa-500px >}} fa-500px
- {{< icon fa-adn >}} fa-adn
- {{< icon fa-amazon >}} fa-amazon
- {{< icon fa-android >}} fa-android
- {{< icon fa-angellist >}} fa-angellist
- {{< icon fa-apple >}} fa-apple
- {{< icon fa-bandcamp >}} fa-bandcamp
- {{< icon fa-behance >}} fa-behance
- {{< icon fa-behance-square >}} fa-behance-square
- {{< icon fa-bitbucket >}} fa-bitbucket
- {{< icon fa-bitbucket-square >}} fa-bitbucket-square
- {{< icon fa-bitcoin >}} fa-bitcoin (alias)
- {{< icon fa-black-tie >}} fa-black-tie
- {{< icon fa-bluetooth >}} fa-bluetooth
- {{< icon fa-bluetooth-b >}} fa-bluetooth-b
- {{< icon fa-btc >}} fa-btc
- {{< icon fa-buysellads >}} fa-buysellads
- {{< icon fa-cc-amex >}} fa-cc-amex
- {{< icon fa-cc-diners-club >}} fa-cc-diners-club
- {{< icon fa-cc-discover >}} fa-cc-discover
- {{< icon fa-cc-jcb >}} fa-cc-jcb
- {{< icon fa-cc-mastercard >}} fa-cc-mastercard
- {{< icon fa-cc-paypal >}} fa-cc-paypal
- {{< icon fa-cc-stripe >}} fa-cc-stripe
- {{< icon fa-cc-visa >}} fa-cc-visa
- {{< icon fa-chrome >}} fa-chrome
- {{< icon fa-codepen >}} fa-codepen
- {{< icon fa-codiepie >}} fa-codiepie
- {{< icon fa-connectdevelop >}} fa-connectdevelop
- {{< icon fa-contao >}} fa-contao
- {{< icon fa-css3 >}} fa-css3
- {{< icon fa-dashcube >}} fa-dashcube
- {{< icon fa-delicious >}} fa-delicious
- {{< icon fa-deviantart >}} fa-deviantart
- {{< icon fa-digg >}} fa-digg
- {{< icon fa-dribbble >}} fa-dribbble
- {{< icon fa-dropbox >}} fa-dropbox
- {{< icon fa-drupal >}} fa-drupal
- {{< icon fa-edge >}} fa-edge
- {{< icon fa-eercast >}} fa-eercast
- {{< icon fa-empire >}} fa-empire
- {{< icon fa-envira >}} fa-envira
- {{< icon fa-etsy >}} fa-etsy
- {{< icon fa-expeditedssl >}} fa-expeditedssl
- {{< icon fa-fa >}} fa-fa (alias)
- {{< icon fa-facebook >}} fa-facebook
- {{< icon fa-facebook-f >}} fa-facebook-f (alias)
- {{< icon fa-facebook-official >}} fa-facebook-official
- {{< icon fa-facebook-square >}} fa-facebook-square
- {{< icon fa-firefox >}} fa-firefox
- {{< icon fa-first-order >}} fa-first-order
- {{< icon fa-flickr >}} fa-flickr
- {{< icon fa-font-awesome >}} fa-font-awesome
- {{< icon fa-fonticons >}} fa-fonticons
- {{< icon fa-fort-awesome >}} fa-fort-awesome
- {{< icon fa-forumbee >}} fa-forumbee
- {{< icon fa-foursquare >}} fa-foursquare
- {{< icon fa-free-code-camp >}} fa-free-code-camp
- {{< icon fa-ge >}} fa-ge (alias)
- {{< icon fa-get-pocket >}} fa-get-pocket
- {{< icon fa-gg >}} fa-gg
- {{< icon fa-gg-circle >}} fa-gg-circle
- {{< icon fa-git >}} fa-git
- {{< icon fa-git-square >}} fa-git-square
- {{< icon fa-github >}} fa-github
- {{< icon fa-github-alt >}} fa-github-alt
- {{< icon fa-github-square >}} fa-github-square
- {{< icon fa-gitlab >}} fa-gitlab
- {{< icon fa-gittip >}} fa-gittip (alias)
- {{< icon fa-glide >}} fa-glide
- {{< icon fa-glide-g >}} fa-glide-g
- {{< icon fa-google >}} fa-google
- {{< icon fa-google-plus >}} fa-google-plus
- {{< icon fa-google-plus-circle >}} fa-google-plus-circle (alias)
- {{< icon fa-google-plus-official >}} fa-google-plus-official
- {{< icon fa-google-plus-square >}} fa-google-plus-square
- {{< icon fa-google-wallet >}} fa-google-wallet
- {{< icon fa-gratipay >}} fa-gratipay
- {{< icon fa-grav >}} fa-grav
- {{< icon fa-hacker-news >}} fa-hacker-news
- {{< icon fa-houzz >}} fa-houzz
- {{< icon fa-html5 >}} fa-html5
- {{< icon fa-imdb >}} fa-imdb
- {{< icon fa-instagram >}} fa-instagram
- {{< icon fa-internet-explorer >}} fa-internet-explorer
- {{< icon fa-ioxhost >}} fa-ioxhost
- {{< icon fa-joomla >}} fa-joomla
- {{< icon fa-jsfiddle >}} fa-jsfiddle
- {{< icon fa-lastfm >}} fa-lastfm
- {{< icon fa-lastfm-square >}} fa-lastfm-square
- {{< icon fa-leanpub >}} fa-leanpub
- {{< icon fa-linkedin >}} fa-linkedin
- {{< icon fa-linkedin-square >}} fa-linkedin-square
- {{< icon fa-linode >}} fa-linode
- {{< icon fa-linux >}} fa-linux
- {{< icon fa-maxcdn >}} fa-maxcdn
- {{< icon fa-meanpath >}} fa-meanpath
- {{< icon fa-medium >}} fa-medium
- {{< icon fa-meetup >}} fa-meetup
- {{< icon fa-mixcloud >}} fa-mixcloud
- {{< icon fa-modx >}} fa-modx
- {{< icon fa-odnoklassniki >}} fa-odnoklassniki
- {{< icon fa-odnoklassniki-square >}} fa-odnoklassniki-square
- {{< icon fa-opencart >}} fa-opencart
- {{< icon fa-openid >}} fa-openid
- {{< icon fa-opera >}} fa-opera
- {{< icon fa-optin-monster >}} fa-optin-monster
- {{< icon fa-pagelines >}} fa-pagelines
- {{< icon fa-paypal >}} fa-paypal
- {{< icon fa-pied-piper >}} fa-pied-piper
- {{< icon fa-pied-piper-alt >}} fa-pied-piper-alt
- {{< icon fa-pied-piper-pp >}} fa-pied-piper-pp
- {{< icon fa-pinterest >}} fa-pinterest
- {{< icon fa-pinterest-p >}} fa-pinterest-p
- {{< icon fa-pinterest-square >}} fa-pinterest-square
- {{< icon fa-product-hunt >}} fa-product-hunt
- {{< icon fa-qq >}} fa-qq
- {{< icon fa-quora >}} fa-quora
- {{< icon fa-ra >}} fa-ra (alias)
- {{< icon fa-ravelry >}} fa-ravelry
- {{< icon fa-rebel >}} fa-rebel
- {{< icon fa-reddit >}} fa-reddit
- {{< icon fa-reddit-alien >}} fa-reddit-alien
- {{< icon fa-reddit-square >}} fa-reddit-square
- {{< icon fa-renren >}} fa-renren
- {{< icon fa-resistance >}} fa-resistance (alias)
- {{< icon fa-safari >}} fa-safari
- {{< icon fa-scribd >}} fa-scribd
- {{< icon fa-sellsy >}} fa-sellsy
- {{< icon fa-share-alt >}} fa-share-alt
- {{< icon fa-share-alt-square >}} fa-share-alt-square
- {{< icon fa-shirtsinbulk >}} fa-shirtsinbulk
- {{< icon fa-simplybuilt >}} fa-simplybuilt
- {{< icon fa-skyatlas >}} fa-skyatlas
- {{< icon fa-skype >}} fa-skype
- {{< icon fa-slack >}} fa-slack
- {{< icon fa-slideshare >}} fa-slideshare
- {{< icon fa-snapchat >}} fa-snapchat
- {{< icon fa-snapchat-ghost >}} fa-snapchat-ghost
- {{< icon fa-snapchat-square >}} fa-snapchat-square
- {{< icon fa-soundcloud >}} fa-soundcloud
- {{< icon fa-spotify >}} fa-spotify
- {{< icon fa-stack-exchange >}} fa-stack-exchange
- {{< icon fa-stack-overflow >}} fa-stack-overflow
- {{< icon fa-steam >}} fa-steam
- {{< icon fa-steam-square >}} fa-steam-square
- {{< icon fa-stumbleupon >}} fa-stumbleupon
- {{< icon fa-stumbleupon-circle >}} fa-stumbleupon-circle
- {{< icon fa-superpowers >}} fa-superpowers
- {{< icon fa-telegram >}} fa-telegram
- {{< icon fa-tencent-weibo >}} fa-tencent-weibo
- {{< icon fa-themeisle >}} fa-themeisle
- {{< icon fa-trello >}} fa-trello
- {{< icon fa-tripadvisor >}} fa-tripadvisor
- {{< icon fa-tumblr >}} fa-tumblr
- {{< icon fa-tumblr-square >}} fa-tumblr-square
- {{< icon fa-twitch >}} fa-twitch
- {{< icon fa-twitter >}} fa-twitter
- {{< icon fa-twitter-square >}} fa-twitter-square
- {{< icon fa-usb >}} fa-usb
- {{< icon fa-viacoin >}} fa-viacoin
- {{< icon fa-viadeo >}} fa-viadeo
- {{< icon fa-viadeo-square >}} fa-viadeo-square
- {{< icon fa-vimeo >}} fa-vimeo
- {{< icon fa-vimeo-square >}} fa-vimeo-square
- {{< icon fa-vine >}} fa-vine
- {{< icon fa-vk >}} fa-vk
- {{< icon fa-wechat >}} fa-wechat (alias)
- {{< icon fa-weibo >}} fa-weibo
- {{< icon fa-weixin >}} fa-weixin
- {{< icon fa-whatsapp >}} fa-whatsapp
- {{< icon fa-wikipedia-w >}} fa-wikipedia-w
- {{< icon fa-windows >}} fa-windows
- {{< icon fa-wordpress >}} fa-wordpress
- {{< icon fa-wpbeginner >}} fa-wpbeginner
- {{< icon fa-wpexplorer >}} fa-wpexplorer
- {{< icon fa-wpforms >}} fa-wpforms
- {{< icon fa-xing >}} fa-xing
- {{< icon fa-xing-square >}} fa-xing-square
- {{< icon fa-y-combinator >}} fa-y-combinator
- {{< icon fa-y-combinator-square >}} fa-y-combinator-square (alias)
- {{< icon fa-yahoo >}} fa-yahoo
- {{< icon fa-yc >}} fa-yc (alias)
- {{< icon fa-yc-square >}} fa-yc-square (alias)
- {{< icon fa-yelp >}} fa-yelp
- {{< icon fa-yoast >}} fa-yoast
- {{< icon fa-youtube >}} fa-youtube
- {{< icon fa-youtube-play >}} fa-youtube-play
- {{< icon fa-youtube-square >}} fa-youtube-square

View File

@@ -0,0 +1,154 @@
+++
title = "mermaid"
description = ""
+++
## Flowchart example
{{%expand "Show code ..."%}}
{{</*mermaid align="left"*/>}}
graph LR;
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
{{</* /mermaid */>}}
{{%/expand%}}
{{<mermaid align="left">}}
graph LR;
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
{{< /mermaid >}}
### With sub-graphs and some style
{{%expand "Show code..."%}}
{{</*mermaid align="left"*/>}}
graph LR;
X --> Y
linkStyle 0 stroke:#f00,stroke-width:4px;
Y --> Z
Z --> X
linkStyle 1,2 interpolate basis stroke:#0f0,stroke-width:2px;
X --> A1
subgraph right
A2 --> B2
B2 --> C2
end
subgraph left
A1 --> B1
B1 --> C1
end
C1 --> X
Z --> A2
C2 --> Z
style Y fill:#f9f,stroke:#333,stroke-width:4px
classDef left fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
class A1,B1,C1 left
{{</* /mermaid */>}}
{{%/expand%}}
{{<mermaid align="left">}}
graph LR;
X --> Y
linkStyle 0 stroke:#f00,stroke-width:4px;
Y --> Z
Z --> X
linkStyle 1,2 interpolate basis stroke:#0f0,stroke-width:2px;
X --> A1
subgraph right
A2 --> B2
B2 --> C2
end
subgraph left
A1 --> B1
B1 --> C1
end
C1 --> X
Z --> A2
C2 --> Z
style Y fill:#f9f,stroke:#333,stroke-width:4px
classDef left fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
class A1,B1,C1 left
{{</mermaid>}}
## Sequence example
{{%expand "Show code ..."%}}
{{</*mermaid*/>}}
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail...
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!
{{</* /mermaid */>}}
{{%/expand%}}
{{<mermaid>}}
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail...
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!
{{< /mermaid >}}
## GANTT Example
{{%expand "Show code ..."%}}
{{</*mermaid*/>}}
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
{{</* /mermaid */>}}
{{%/expand%}}
{{<mermaid>}}
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
{{</mermaid>}}

View File

@@ -0,0 +1,61 @@
+++
title = "notice"
description = "Disclaimers to help you structure your page"
+++
The notice shortcode shows 4 types of disclaimers to help you structure your page.
## Note
{{%/* notice note */%}}
A notice disclaimer
{{%/* /notice */%}}
renders as
{{% notice note %}}
A notice disclaimer
{{% /notice %}}
## Info
{{%/* notice info */%}}
An information disclaimer
{{%/* /notice */%}}
renders as
{{% notice info %}}
An information disclaimer
{{% /notice %}}
## Tip
{{%/* notice tip */%}}
A tip disclaimer
{{%/* /notice */%}}
renders as
{{% notice tip %}}
A tip disclaimer
{{% /notice %}}
## Warning
{{%/* notice warning */%}}
An warning disclaimer
{{%/* /notice */%}}
renders as
{{% notice warning %}}
An warning disclaimer
{{% /notice %}}

View File

@@ -0,0 +1,60 @@
+++
title = "panel"
description = "Allow you to highlight information or put it in a box."
+++
{{% panel theme="success" header="The panel shortcode" %}}Allow you to highlight information or put it in a box. They create a colored box surrounding your text{{% /panel %}}
## Usage
| Parameter | Default | Description |
|:--|:--|:--|
| header | none | The title of the panel. If specified, this title will be displayed in its own header row. |
| footer | none | the footer of the panel. If specified, this text will be displayed in its own row |
| theme | `primary` | `default`,`primary`,`info`,`success`,`warning`,`danger` |
## Basic example
By default :
{{%/* panel */%}}this is a panel text{{%/* /panel */%}}
{{%panel%}}this is a panel text{{%/panel%}}
## Panel with heading
Easily add a heading container to your panel with `header` parameter. You may apply any theme.
{{%/* panel theme="danger" header="panel title" */%}}this is a panel text{{%/* /panel */%}}
{{% panel theme="danger" header="panel title" %}}this is a panel text{{% /panel %}}
{{%/* panel theme="success" header="panel title" */%}}this is a panel text{{%/* /panel */%}}
{{% panel theme="success" header="panel title" %}}this is a panel text{{% /panel %}}
## Panel with footer
Wrap a secondary text in footer.
{{%/* panel footer="panel footer" */%}}Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.{{%/* /panel */%}}
{{% panel footer="panel footer" %}}
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
{{% /panel %}}
## Themes
{{% panel theme="success" header="Success theme" %}}this is a panel text{{% /panel %}}
{{% panel theme="default" header="default theme" %}}this is a panel text{{% /panel %}}
{{% panel theme="primary" header="primary theme" %}}this is a panel text{{% /panel %}}
{{% panel theme="info" header="info theme" %}}this is a panel text{{% /panel %}}
{{% panel theme="warning" header="warning theme" %}}this is a panel text{{% /panel %}}
{{% panel theme="danger" header="danger theme" %}}this is a panel text{{% /panel %}}

View File

@@ -0,0 +1,119 @@
+++
title = "revealjs"
slug = "revealjs"
description = "present content as a reveal.js slide"
+++
This shortcode will format the enclosed markdow to render it with [reveal.js](http://lab.hakim.se/reveal-js/) at runtime (client-side)
Read more on [revealjs github repo](https://github.com/hakimel/reveal.js/#markdown).
## Usage
`revealjs` can use the following named parameters :
* theme
* transition
* controls
* progress
* history
* center
{{%warning title="Important" %}}Even if the enclosed content is a mardown, use `<` shortcode notation instead of the `%` notation {{%/warning %}}
### Content formating and slide delimiters
[read more on this here]({{% relref "page-slide.md"%}})
## Demo
{{<revealjs theme="moon" progress="true">}}
# In the morning
___
## Getting up
- Turn off alarm
- Get out of bed
___
## Breakfast
- Eat eggs
- Drink coffee
---
# In the evening
___
## Dinner
- Eat spaghetti
- Drink wine
___
## Going to sleep
- Get in bed
- Count sheep
{{</revealjs>}}
## Source :
{{%expand "Show code ..."%}}
```
{{</*revealjs theme="moon" progress="true"*/>}}
# In the morning
___
## Getting up
- Turn off alarm
- Get out of bed
___
## Breakfast
- Eat eggs
- Drink coffee
---
# In the evening
___
## Dinner
- Eat spaghetti
- Drink wine
___
## Going to sleep
- Get in bed
- Count sheep
{{</*revealjs*/>}}
```
{{%/expand%}}
* [{{%icon "sunglasses" %}} click here to view raw content](https://raw.githubusercontent.com/vjeantet/hugo-theme-docdock/master/exampleSite/content/shortcodes/revealjs.md)

View File

@@ -0,0 +1,15 @@
+++
title = "Docdock-built Sites"
description = "Hugo-built Sites with docdock theme"
+++
#### [https://invincible.site/](https://invincible.site/) by [@shazic](https://github.com/shazic)
![https://invincible.site/](/showcase/invincible.site.png?height=250&classes=border,shadow)
#### [https://bitfan.io/](https://bitfan.io) by [@vjeantet](https://github.com/vjeantet)
![https://bitfan.io/](/showcase/bitfan.site.png?height=250&classes=border,shadow)