- Shortcodes are supported only in WordPress and Joomla!™ including versions with wooCommerce and VirtuShop plug-ins.
- Colors and styles depend on current settings modified in Default Styles.
Button
[button link="http://..."]Button[/button]
Button with Icon
[button icon="icon-search"]Button with Icon[/button]
NOTE: link and icon are supported with all button styles and sizes.
Bootstrap Button
Add type="bootstrap" to change a default button to a Bootstrap button. Use style and size attributes to customize it.
NOTE: style and size attributes work only for buttons with type="bootstrap"
Button Styles
Supported Values: default, primary, success, info, warning, danger, link
[button type="bootstrap" style="default"]Default[/button]
[button type="bootstrap" style="primary"]Primary[/button]
[button type="bootstrap" style="success"]Success[/button]
[button type="bootstrap" style="info"]Info[/button]
[button type="bootstrap" style="warning"]Warning[/button]
[button type="bootstrap" style="danger"]Danger[/button]
[button type="bootstrap" style="link"]Link[/button]
Button Size
Supported additions to size attribute: large, small, xsmall
[button type="bootstrap" style="default" size="large"]Large Button[/button]
[button type="bootstrap" style="primary" size="large"]Large Button[/button]
[button type="bootstrap" style="default"]Default Button[/button]
[button type="bootstrap" style="primary"]Default Button[/button]
[button type="bootstrap" style="default" size="small"]Small Button[/button]
[button type="bootstrap" style="primary" size="small"]Small Button[/button]
[button type="bootstrap" style="default" size="xsmall"]Extra Small Button[/button]
[button type="bootstrap" style="primary" size="xsmall"]extra Small Button[/button]
Used to display a group of Text, Header and Image. Embed any other shortcodes in the content, those shordcodes are supported as well.
Basic Layouts
Text Only
[text_group]Cras sit amet nibh libero... [button]Button[/button] [/text_group]
Text with Header
[text_group header="Heading"]Cras sit amet nibh libero...[/text_group]
Text with Header and Image
[text_group header="Heading" image="http://..."]Cras sit amet nibh libero...[/text_group]
Header Options
Specify header_tag to change Header. Supported Values: h1, h2, h3, h4, h5, h6. The h3 is the default value.
[text_group header="Heading" header_tag="h2"]Cras sit amet nibh libero...[/text_group]
Image Options
Image Link
Specify a link to image with the image_link attribute.
[text_group image="http://" image_link="http://"]Cras sit amet nibh libero...[/text_group]
Image Size
Specify the Image's Width and Height with the image_width and image_height attributes.
[text_group image="http://" image_link="http://" image_width="140px" image_height="140px"]Cras sit amet nibh libero...[/text_group]
Alternative Image Positions
Supported Values: left, right, top, middle, bottom. The left is default.
Left and Right
[text_group header="Heading" image="http://..." image_position="left"]Cras sit amet nibh libero...[/text_group]
[text_group header="Heading" image="http://..." image_position="right"]Cras sit amet nibh libero...[/text_group]
Top, Middle and Bottom
[text_group header="Heading" image="http://..." image_position="top"]Cras sit amet nibh libero...[/text_group]
[text_group header="Heading" image="http://..." image_position="middle"]Cras sit amet nibh libero...[/text_group]
[text_group header="Heading" image="http://..." image_position="bottom"]Cras sit amet nibh libero...[/text_group]
Columns
Use to create layouts. Embed any other shortcodes in the content, those shordcodes are supported as well.
Basic Layouts
Supported values: one_half, one_third, two_third, one_fourth, three_fourth.
One Half
One Half
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
One Half
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
[one_half]Cras sit amet nibh libero...[/one_half]
[one_half]Cras sit amet nibh libero...[/one_half]
One Third
One Third
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
One Third
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
One Third
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
[one_third]Cras sit amet nibh libero...[/one_third]
[one_third]Cras sit amet nibh libero...[/one_third]
[one_third]Cras sit amet nibh libero...[/one_third]
One Third and Two Thirds
One Third
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Two Thirds
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
[one_third]Cras sit amet nibh libero...[/one_third]
[two_third]Cras sit amet nibh libero...[/two_third]
One Fourth
One Fourth
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
One Fourth
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
One Fourth
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
One Fourth
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
[one_fourth]Cras sit amet nibh libero...[/one_fourth]
[one_fourth]Cras sit amet nibh libero...[/one_fourth]
[one_fourth]Cras sit amet nibh libero...[/one_fourth]
[one_fourth]Cras sit amet nibh libero...[/one_fourth]
One Fourth and Three Fourths
One Fourth
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Three Fourths
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
[one_fourth]Cras sit amet nibh libero...[/one_fourth]
[three_fourth]Cras sit amet nibh libero...[/three_fourth]
Custom Layouts
Create layouts with custom width with column. Specify width to set Column Width.
- To fit columns into one row, total number of columns MUST BE equal to 24, otherwise, exceeding columns are moved to the next row.
- Mark last columns in a row with the
last attribute.
Example of Columns with Various Width
Width 5
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Width 9
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Width 10
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
[column width="5"]Cras sit amet nibh libero...[/column]
[column width="9"]Cras sit amet nibh libero...[/column]
[column width="10" last]Cras sit amet nibh libero...[/column]
Custom Responsive Width
By default, the width attribute specifies the width for laptops and other devices with higher screen resolution.
However, Column Width may be customized for each screen resolution: Desktops, Laptops, Tables, Phones.
Use width_lg for Desktops, width for Laptops, width_sm for Tables, width_xs for Phones.
[column width_lg="6" width="8" width_sm="12" width_xs="6"]Cras sit amet nibh libero...[/column]
By default, full_width="no" and content_width="yes".
Use css="" to add additional styling. If full_width="yes" and content_width="no" then both content and styles spread from the left side of a browser to the right.
If full_width="yes" and content_width="yes" then content is aligned for the content and styles spread from the left side of a browser to the right.
[box css="" full_width="yes|no" content_width="yes|no"]content with shortcodes[/box]
By default, wide_slides="yes", wide_carousel="yes", interval="3000".
The image placed on slide's background contains an image link or an id. If link is set, the linktarget, may be '', '_blank', '_self', '_parent', '_top'. Slide may contain any content.
[slider css="" wide_slides="yes|no" wide_carousel="yes|no" interval="3000"]
[slide css="" image="http:// | id" link="" linktarget=""]any slide content here[/slide]
[/slider]
By default, autoplay="no", loop="no", title="yes", light_control_bar="no", css="", show_control_bar="show".
[video link="https://www.youtube.com/watch?v=o__Uir1XH3k" autoplay="yes" loop="yes" title="no" light_control_bar="yes"
show_control_bar="show/hide/autohide" style="width: 300px"][/video]
By default, address="", zoom="auto", map_type="auto", language="auto", css=""
[googlemap address="Manchester" zoom="10" map_type="satelite" language="en" css="height: 400px"][/googlemap]
zoom:
map_type:
language:
"auto", "eu" (Basque), "ca" (Catalan), "hr" (Croatian), "cs" (Czech), "da" (Danish), "nl" (Dutch),
"en" (English), "fi" (Finnish), "fr" (French), "de" (German), "gl" (Galacian), "el" (Greek), "hi" (Hindi), "id" (Indonesian), "it" (Italian), "ja" (Japanese), "no" (Norwegian),
"nn" (Nyorsk), "pt" (Portuguese), "rm" (Raeto-Romance), "ru" (Russian), "sr" (Serbian), "sk" (Slovak), "sl" (Slovenian), "es" (Spanish), "sv" (Swedish), "th" (Thai), "tr" (Turkish), "uk" (Ukrainian),
"vi" (Vietnamese)
Usage Code
icon-adjust
To use Icons just place the
<i> tag.
<i class="icon-adjust"></i> icon-adjust
icon-adjust
To increase icon size use font-size css attribute.
<i class="icon-adjust" style="font-size: 22px;"></i> icon-adjust
Use BillionWebFont icons with Bootstrap components.
<a class="btn btn-default btn-lg active"role="button" href="#">
<i class="icon-adjust" ></i> icon-adjust
</a>
icon-adjust
icon-adn
icon-asterisk
icon-ban
icon-bar-chart
icon-barcode
icon-bell
icon-bolt
icon-bookmark
icon-bookmark-alt
icon-brain
icon-bug
icon-calendar
icon-calendar-day
icon-calendar-day-alt
icon-calendar-simple
icon-certificate
icon-cloud
icon-cloud-download
icon-cloud-upload
icon-code
icon-cog
icon-cogs
icon-comment
icon-comment-alt
icon-comments
icon-comments-alt
icon-compress
icon-credit-card
icon-crop
icon-delete
icon-delete-circle-alt
icon-downturn
icon-earth
icon-eject
icon-envelope
icon-envelope-alt
icon-exchange
icon-exclamation-sign
icon-expand
icon-eye-close
icon-eye-open
icon-female
icon-film
icon-filter
icon-filter-alt
icon-find-contact
icon-flag
icon-flag-alt
icon-folder
icon-folder-alt
icon-folder-open
icon-globe
icon-globe-alt
icon-globe-outline
icon-group
icon-growth
icon-h-sign
icon-happy
icon-hdd
icon-heart
icon-heart-circle
icon-heart-empty
icon-image
icon-image-alt
icon-inbox
icon-info-sign
icon-lines
icon-male
icon-map-marker
icon-phone
icon-phone-square
icon-pie-chart
icon-power
icon-qrcode
icon-question-circle
icon-random
icon-remove-sign
icon-reply
icon-reply-all
icon-retweet
icon-rss
icon-scales
icon-screenshot
icon-search
icon-search-alt
icon-search-circle
icon-search-glare
icon-search-thick
icon-search-thin
icon-share
icon-share-alt
icon-sign-in
icon-sign-out
icon-signal
icon-sitemap
icon-star
icon-star-alt
icon-star-half
icon-star-thin
icon-tablet
icon-tag
icon-tags
icon-tasks
icon-terminal
icon-thumbs-down
icon-thumbs-up
icon-tick
icon-tick-circle
icon-tick-circle-alt
icon-unhappy
icon-upload
icon-upload-circle
icon-upload-circle-alt
icon-user
icon-user-alt
icon-user-business
icon-user-medical
icon-warning
icon-zoom-in
icon-zoom-out
icon-ambulance
icon-anchor
icon-aperture
icon-beaker
icon-beer
icon-book
icon-book-open
icon-briefcase
icon-briefcase-simple
icon-building
icon-bullhorn
icon-camera
icon-coffee
icon-cup
icon-dialer
icon-drop
icon-fighter
icon-fire
icon-food
icon-gift
icon-glass
icon-headphones
icon-help
icon-home
icon-home-alt
icon-hospital
icon-house
icon-leaf
icon-leaf-thin
icon-legal
icon-lemon
icon-lightbulb
icon-lock
icon-magic
icon-magnet
icon-medkit
icon-mobile
icon-moon
icon-music
icon-plane
icon-plane-alt
icon-plane-takeoff
icon-pushpin
icon-road
icon-sandwich
icon-stethoscope
icon-suitcase
icon-time
icon-time-alt
icon-trash-can
icon-truck
icon-umbrella
icon-video
icon-wrench
icon-bag
icon-basket
icon-basket-simple
icon-booth
icon-dollar
icon-euro
icon-gbp
icon-inr
icon-money
icon-product-view-mode
icon-rubl
icon-shopping-cart
icon-shopping-cart-buggy
icon-shopping-cart-simple
icon-shopping-cart-solid
icon-shopping-cart-trolley
icon-shopping-cart-wire
icon-won
icon-yen
icon-arrow-angle-down
icon-arrow-angle-left
icon-arrow-angle-right
icon-arrow-angle-up
icon-arrow-basic-down
icon-arrow-basic-left
icon-arrow-basic-right
icon-arrow-basic-up
icon-arrow-circle-alt-down
icon-arrow-circle-alt-left
icon-arrow-circle-alt-right
icon-arrow-circle-alt-up
icon-arrow-double-down
icon-arrow-double-left
icon-arrow-double-right
icon-arrow-double-up
icon-arrow-long-down
icon-arrow-long-left
icon-arrow-long-right
icon-arrow-long-up
icon-arrow-pointer-down
icon-arrow-pointer-left
icon-arrow-pointer-right
icon-arrow-pointer-up
icon-arrow-small-down
icon-arrow-small-left
icon-arrow-small-right
icon-arrow-small-up
icon-arrow-square-down
icon-arrow-square-left
icon-arrow-square-right
icon-arrow-square-up
icon-arrow-tall-down
icon-arrow-tall-left
icon-arrow-tall-right
icon-arrow-tall-up
icon-arrow-thick-down
icon-arrow-thick-left
icon-arrow-thick-right
icon-arrow-thick-up
icon-arrow-thin-down
icon-arrow-thin-left
icon-arrow-thin-right
icon-arrow-thin-up
icon-arrows
icon-arrows-alt
icon-arrows-horizontal
icon-arrows-vertical
icon-caret-down
icon-caret-left
icon-caret-right
icon-caret-up
icon-chevron-down
icon-chevron-left
icon-chevron-right
icon-chevron-up
icon-circle-arrow-down
icon-circle-arrow-left
icon-circle-arrow-right
icon-circle-arrow-up
icon-double-chevron-down
icon-double-chevron-left
icon-double-chevron-right
icon-double-chevron-up
icon-hand-down
icon-hand-left
icon-hand-right
icon-hand-up
icon-angle-double
icon-angle-small
icon-arrow-fancy
icon-arrow-line
icon-box
icon-box-alt
icon-box-small
icon-box-small-alt
icon-curve-bottom
icon-curve-top
icon-fancy-circle-alt
icon-four-boxes
icon-four-boxes-alt
icon-four-rhombs
icon-heartlet
icon-label
icon-mark
icon-node-circle
icon-node-square
icon-pointer-basic
icon-rhomb
icon-round
icon-round-alt
icon-round-small
icon-round-small-alt
icon-starlet
icon-starlet-alt
icon-stripes
icon-stripes-thick
icon-ticklet
icon-ticklet-circle
icon-ticklet-circle-alt
icon-ticklet-thick
icon-triangle
icon-triangle-circle
icon-triangle-circle-alt
icon-align-center
icon-align-justify
icon-align-left
icon-align-right
icon-backward
icon-bold
icon-check
icon-check-empty
icon-circle
icon-circle-alt
icon-copy
icon-cut
icon-edit
icon-edit-alt
icon-ellipsis
icon-external-link
icon-fast-backward
icon-fast-forward
icon-file
icon-file-alt
icon-font
icon-forward
icon-fullscreen
icon-grid
icon-grid-small
icon-indent-left
icon-indent-right
icon-italic
icon-list
icon-list-adv
icon-list-details
icon-list-details-small
icon-minus
icon-minus-circle
icon-minus-square
icon-minus-square-alt
icon-paste
icon-pause
icon-pencil
icon-play
icon-play-circle
icon-plus
icon-plus-circle
icon-plus-square
icon-plus-square-alt
icon-print
icon-properties
icon-quote-left
icon-quote-right
icon-repeat
icon-restore
icon-save
icon-sign-blank
icon-sort
icon-sort-alpha
icon-sort-alpha-asc
icon-sort-alpha-desc
icon-sort-amount-asc
icon-sort-amount-desc
icon-sort-asc
icon-sort-desc
icon-sort-numeric
icon-sort-numeric-asc
icon-sort-numeric-desc
icon-spinner
icon-step-backward
icon-step-forward
icon-strikethrough
icon-superscript
icon-text-height
icon-text-width
icon-typeface
icon-undo
icon-volume-down
icon-volume-off
icon-volume-up
Brand Icons
icon-android
icon-apple
icon-bitbucket
icon-bitbucket-alt
icon-bitcoin
icon-css3
icon-delicious
icon-dribbble
icon-dropbox
icon-facebook
icon-facebook-alt
icon-facebook-square
icon-flickr
icon-github
icon-github-alt
icon-github-square
icon-google-plus
icon-google-plus-square
icon-html5
icon-instagram
icon-linkedin
icon-linkedin-square
icon-linux
icon-maxcdn
icon-picasa
icon-pinterest
icon-pinterest-square
icon-renminbi
icon-renren
icon-skype
icon-stackexchange
icon-trello-square
icon-tumblr
icon-tumblr-square
icon-twitter
icon-twitter-square
icon-vimeo
icon-vk
icon-weibo
icon-windows
icon-xing
icon-xing-square
icon-yahoo
icon-youtube
icon-youtube-play
icon-youtube-square
- All brand icons are trademarks of their respective owners. The use of these trademarks does not indicate endorsement of the trademark holder by BillionWebFont,
nor vice versa.
- Read BillionWebFonts License.