Spice up your content a little with the finer details! In this section, we’ll quickly show some examples of little elements you can use inline with your content.
FontAwesome Vector Icons
Take advantage of our theme framework’s integration of FontAwesome.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
[vector_icon icon="star"]
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
[vector_icon icon="star" size="20px"]
Options
| Argument | Default | Description |
|---|---|---|
| icon (required) | None | Icon name (view icons). Ex: arrow-right, chevron-right, twitter, etc. Note: Do not prefix icon ID with fa-. |
| color | None | Color for the icon – #660000, #000, etc. |
| size | None | A font-size declaration – 20px, 2em, etc. |
| rotate | None | Optional rotation of the icon – 90, 180, 270. |
| flip | None | Optional flip of the icon – horizontal, vertical. |
| class | None | Optional CSS class for the icon. |
Labels
Hold up! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
[label style="warning"]Hold up![/label]
Information Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
[label style="info" icon="info-circle"]Information[/label]
Options
| Argument | Default | Description |
|---|---|---|
| style | default | Style of label, see below – default, success, warning, important, info. |
| icon | None | Optional icon in label (view icons). Ex: arrow-right, chevron-right, twitter, etc. Note: Do not prefix icon ID with fa-. |
Styles
| Example | Usage |
|---|---|
| Default | [label]Default[/label] |
| Success | [label style="success"]Success[/label] |
| Warning | [label style="warning"]Warning[/label] |
| Important | [label style="important"]Important[/label] |
| Information | [label style="info"]Information[/label] |
Icon Links
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
[icon_link icon="download" link="http://google.com"]Download the freebie![/icon_link]
Options
| Argument | Default | Description |
|---|---|---|
| icon (required) | None | Icon before text of link (view icons). Ex: arrow-right, chevron-right, twitter, etc. Note: Do not prefix icon ID with fa-. |
| link (required) | None | The full URL of where you want the link to go. Ex: http://google.com |
| color | None | Color of the icon – Ex: #660000 |
| target | _self | How the link will open – _self (same window) or _blank (new window). |
| class | None | Any CSS classes you want to add to the wrapping HTML. |
| title | None | Title tag of link, for you SEO folks. If left blank, it will default to the text of the link. |
Text Highlighting
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.
[highlight]This text will be highlighted.[/highlight]
Drop Caps
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. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
[dropcap]T[/dropcap]he first letter will be large.