Important: {% endcapture %}
{% capture warning %}
Warning: {% endcapture %}
{% capture end %}
{% endcapture %}
```
{% endraw %}
This means you can insert a tip, note, warning, or important alert simply by using these tags:
{% raw %}
```
{{note}} Add your note here. {{end}}
```
{% endraw %}
Here's the result:
{{note}} Add your note here. {{end}}
{{tip}} Here's my tip. {{end}}
{{important}} This information is very important.{{end}}
{{warning}} If you overlook this, you may die. {{end}}
## Creating your own combinations
You can innovate with your own combinations. Here's a similar approach with a check square:
```html
This is a special success message.
```
And the result:
This is a special success message.
Grab the right class name from the [Font Awesome library](http://fortawesome.github.io/Font-Awesome/icons/) and then implement it by following the pattern shown previously.
If you want to make your fonts even larger than the 5x style, add a custom style to your stylesheet like this:
```css
.fa-10x{font-size:1700%;}
```
Then any element with the attribute `fa-10x` will be enlarged 1700%.
## Glyphicon icons available
Glyphicons work similarly to Font Awesome. Go to the [Glyphicons library](http://getbootstrap.com/components/#glyphicons) to see the icons available.
Although the Glyphicon Halflings library doesn't provide the scalable classes like Font Awesome, there's a [StackOverflow trick](http://stackoverflow.com/questions/24960201/how-do-i-make-glyphicons-bigger-change-size) to make the icons behave in a similar way. This theme's stylesheet (customstyles.css) includes the following to the stylesheet:
```css
.gi-2x{font-size: 2em;}
.gi-3x{font-size: 3em;}
.gi-4x{font-size: 4em;}
.gi-5x{font-size: 5em;}
```
Now you just add `gi-5x` or whatever to change the size of the font icon:
```html
```
And here's the result:
Glypicons use the `span` element instead of `i` to attach their classes.
Here's another example:
```html
```
And magnified:
```html
```
You can also put glyphicons inside other elements:
```html
Error: Enter a valid email address
```
Error: Enter a valid email address
## Callouts
The previously shown alerts might be fine for short messages, but with longer notes, the solid color takes up a bit of space. In this theme, you also have the option of using callouts, which are pretty common in Bootstrap's documentation but surprisingly not offered as an explicit element. Their styles have been copied into this theme, in a way similar to the alerts:
```html
This is a special info message. This is a special info message. This is a special info message. This is a special info message. This is a special info message. This is a special info message. This is a special info message. This is a special info message. This is a special info message.
```
This is a special info message. This is a special info message. This is a special info message. This is a special info message. This is a special info message. This is a special info message. This is a special info message. This is a special info message. This is a special info message.
And here's the shortcode:
{% raw %}
```
{{callout_info}}
{{end}}
{% endraw %}
```
You can use any of the following:
{% raw %}
```
{{callout_danger}}
{{callout_default}}
{{callout_primary}}
{{callout_success}}
{{callout_info}}
{{callout_warning}}
```
{% endraw %}