Icon Example
This is the shortcode items Simple Square Icon Example. you can get facility in this shortcode item Icon (select icon from icon picker), Background Color, Color, Size, padding, Margin, URL, Class. just simply use this shortcode and get Icon besides you can use line icon here.
Get shortcodeSimple Square Icon Example
[icon icon="icon: heart" background="#2c3e50" color="#FFF" size="32" padding="20px" radius="0"] [icon icon="icon: leaf" background="#f1c40f" color="#FFF" size="32" padding="20px" radius="0"] [icon icon="icon: comment" background="#3498db" color="#FFF" size="32" padding="20px" radius="0"] [icon icon="icon: joomla" background="#2ecc71" color="#FFF" size="32" padding="20px" radius="0"] [icon icon="icon: html5" background="#d35400" color="#FFF" size="32" padding="20px" radius="0"] [icon icon="icon: phone-square" background="#8e44ad" color="#FFF" size="32" padding="20px" radius="0"] [icon icon="licon: heart" background="#2c3e50" color="#FFF" size="32" padding="20px" radius="0"] [icon icon="licon: alarmclock" background="#f1c40f" color="#FFF" size="32" padding="20px" radius="0"] [icon icon="licon: message-dots" background="#3498db" color="#FFF" size="32" padding="20px" radius="0"] [icon icon="licon: message-check" background="#2ecc71" color="#FFF" size="32" padding="20px" radius="0"] [icon icon="licon: calendar" background="#d35400" color="#FFF" size="32" padding="20px" radius="0"] [icon icon="licon: clock" background="#8e44ad" color="#FFF" size="32" padding="20px" radius="0"] [icon icon="licon: video" background="#686565" color="#FFF" size="32" padding="20px" radius="0"]
Background Icon Example
The shortcode show this items Background Icon Example, You can change background color your like or you can use line icon here.
Get shortcodeBackground Icon Example
[icon icon="icon: facebook" background="#306199" color="#ffffff" size="32" padding="20px" radius="0px"] [icon icon="icon: twitter" background="#26C4F1" color="#ffffff" size="32" padding="20px" radius="0px" ] [icon icon="icon: google-plus" background="#E93F2E" color="#ffffff" size="32" padding="20px" radius="0px"] [icon icon="icon: github" background="#444444" color="#ffffff" size="32" padding="20px" radius="0px"] [icon icon="icon: youtube-play" background="#E12A27" color="#ffffff" size="32" padding="20px" radius="0px"] [icon icon="icon: linkedin" background="#007BB6" color="#ffffff" size="32" padding="20px" radius="0px"] [icon icon="licon: facebook" background="#306199" color="#ffffff" size="32" padding="20px" radius="0px"] [icon icon="licon: twitter" background="#26C4F1" color="#ffffff" size="32" padding="20px" radius="0px" ] [icon icon="licon: googleplus" background="#E93F2E" color="#ffffff" size="32" padding="20px" radius="0px"] [icon icon="licon: dribbble" background="#444444" color="#ffffff" size="32" padding="20px" radius="0px"] [icon icon="licon: rss" background="#E12A27" color="#ffffff" size="32" padding="20px" radius="0px"] [icon icon="licon: dribbble" background="#007BB6" color="#ffffff" size="32" padding="20px" radius="0px"] [icon icon="licon: tumblr" background="#686565" color="#ffffff" size="32" padding="20px" radius="0px"]
Icon Color Style Example
You can change always icon color in this shortcode items facility. of course you insert the shortcode.
Get shortcodeIcon Color Style Example
[icon icon="icon: facebook" background="#f5f5f5" color="#306199" size="32" padding="20px" radius="0"] [icon icon="icon: twitter" background="#f5f5f5" color="#26C4F1" size="32" padding="20px" radius="0"] [icon icon="icon: google-plus" background="#f5f5f5" color="#E93F2E" size="32" padding="20px" radius="0"] [icon icon="icon: github" background="#f5f5f5" color="#444444" size="32" padding="20px" radius="0"] [icon icon="icon: youtube-play" background="#f5f5f5" color="#E12A27" size="32" padding="20px" radius="0"] [icon icon="icon: linkedin" background="#f5f5f5" color="#007BB6" size="32" padding="20px" radius="0"]
Icon Size Example
The shortcode here only look Icon Size Example, if client want use this shortcode please do recently insert shortcode also you can use line icon.
Get shortcodeIcon Size Example
[icon icon="icon: heart" background="#2c3e50" color="#FFF" size="20" padding="20px" radius="0"] [icon icon="icon: leaf" background="#f1c40f" color="#FFF" size="30" padding="20px" radius="0"] [icon icon="icon: comment" background="#3498db" color="#FFF" size="40" padding="20px" radius="0"] [icon icon="icon: phone-square" background="#2ecc71" color="#FFF" size="50" padding="20px" radius="0"] [icon icon="icon: html5" background="#d35400" color="#FFF" size="60" padding="20px" radius="0"] [icon icon="icon: joomla" background="#8e44ad" color="#FFF" size="70" padding="20px" radius="0"] [icon icon="licon: download" background="#2c3e50" color="#FFF" size="10" padding="20px" radius="0"] [icon icon="licon: edit" background="#f1c40f" color="#FFF" size="20" padding="20px" radius="0"] [icon icon="licon: message-check" background="#3498db" color="#FFF" size="30" padding="20px" radius="0"] [icon icon="licon: clock" background="#2ecc71" color="#FFF" size="40" padding="20px" radius="0"] [icon icon="licon: layers" background="#d35400" color="#FFF" size="50" padding="20px" radius="0"] [icon icon="licon: lock" background="#1DD4AF" color="#FFF" size="60" padding="20px" radius="0"] [icon icon="licon: recycle" background="#8e44ad" color="#FFF" size="70" padding="20px" radius="0"]
Icon Radius Example
You can give line icon and icon radius example in this shortcode, so change your choice.
Get shortcodeIcon Radius Example
[icon icon="icon: heart" background="#2c3e50" color="#FFF" size="32" padding="20px" radius="2px"] [icon icon="icon: leaf" background="#f1c40f" color="#FFF" size="32" padding="20px" radius="5px"] [icon icon="icon: comment" background="#3498db" color="#FFF" size="32" padding="20px" radius="10px"] [icon icon="icon: joomla" background="#2ecc71" color="#FFF" size="32" padding="20px" radius="15px"] [icon icon="icon: html5" background="#d35400" color="#FFF" size="32" padding="20px" radius="25px"] [icon icon="icon: windows" background="#7f8c8d" color="#FFF" size="32" padding="20px" radius="100px"] [icon icon="licon: heart" background="#2c3e50" color="#FFF" size="32" padding="20px" radius="2px"] [icon icon="licon: tablet" background="#f1c40f" color="#FFF" size="32" padding="20px" radius="5px"] [icon icon="licon: message-dots" background="#3498db" color="#FFF" size="32" padding="20px" radius="10px"] [icon icon="licon: message-heart" background="#2ecc71" color="#FFF" size="32" padding="20px" radius="15px"] [icon icon="licon: video" background="#d35400" color="#FFF" size="32" padding="20px" radius="25px"] [icon icon="licon: clock" background="#7f8c8d" color="#FFF" size="32" padding="20px" radius="300px"] [icon icon="licon: home" background="#7f8c8d" color="#FFF" size="32" padding="20px" radius="100px"]
Icon URL Example
This is the very beautiful opportunity in this shortcode items icon URL example, so you can change more URL.
Get shortcodeIcon URL Example
[icon icon="icon: facebook" background="#306199" color="#ffffff" size="32" padding="20px" radius="2px" url="https://www.facebook.com/bdthemes"] [icon icon="icon: twitter" background="#26C4F1" color="#ffffff" size="32" padding="20px" radius="2px" url="https://twitter.com/bdthemes"] [icon icon="icon: google-plus" background="#E93F2E" color="#ffffff" size="32" padding="20px" radius="2px" url="https://plus.google.com/+Bdthemes"] [icon icon="icon: github" background="#444444" color="#ffffff" size="32" padding="20px" radius="2px" url="https://www.github.com/bdthemes/"] [icon icon="icon: youtube-play" background="#AA0F09" color="#ffffff" size="32" padding="20px" radius="2px" url="https://www.youtube.com/user/bdthemes"] [icon icon="icon:pinterest" background="#D32A26" color="#ffffff" size="32" padding="20px" radius="2px" url="https://www.pinterest.com/bdthemes/graphics/"]
Icon With Text Example
This is the very beautiful opportunity in this shortcode items icon URL example, so you can change more icon and line icon URL.
Get shortcodeIcon With Text Example
[icon icon="icon: facebook" background="#306199" color="#ffffff" size="16" padding="10px" radius="2px" url="https://www.facebook.com/bdthemes"] Join Us in Facebook [spacer] [/icon] [icon icon="icon: twitter" background="#26C4F1" color="#ffffff" size="16" padding="10px" radius="2px" url="https://twitter.com/bdthemes"] Join Us in Twitter [spacer] [/icon] [icon icon="icon: google-plus" background="#E93F2E" color="#ffffff" size="16" padding="10px" radius="2px" url="https://plus.google.com/+Bdthemes"] Join Us in Google Plus [spacer] [/icon] [icon icon="licon: facebook" background="#444444" color="#ffffff" size="16" padding="10px" radius="2px" url="https://www.github.com/bdthemes/"]Join Us in Facebook[/icon] [icon icon="licon: googleplus" background="#AA0F09" color="#ffffff" size="16" padding="10px" radius="2px" url="https://www.youtube.com/user/bdthemes"]Join Us in Google Plus[/icon] [icon icon="licon: twitter" background="#D32A26" color="#ffffff" size="16" padding="10px" radius="2px" url="https://www.pinterest.com/bdthemes/graphics/"]Join Us in Twitter[/icon]
Square Size No Example
This is the shortcode items Simple Square Icon Example. you can get facility in this shortcode item Icon (select icon from icon picker), Background Color, Color, Size, padding, Margin, URL, Class. just simply use this shortcode and get Icon.
Get shortcodeSimple Square Icon Example
[icon icon="icon: heart" background="#2c3e50" color="#FFF" size="32" padding="20px" radius="0" square_size="no" ] [icon icon="icon: leaf" background="#f1c40f" color="#FFF" size="32" padding="20px" radius="0" square_size="no" ] [icon icon="icon: comment" background="#3498db" color="#FFF" size="32" padding="20px" radius="0" square_size="no" ] [icon icon="icon: joomla" background="#2ecc71" color="#FFF" size="32" padding="20px" radius="0" square_size="no" ] [icon icon="icon: html5" background="#d35400" color="#FFF" size="32" padding="20px" radius="0" square_size="no" ] [icon icon="icon: phone-square" background="#8e44ad" color="#FFF" size="32" padding="20px" radius="0" square_size="no" ] [icon icon="icon: camera" background="#686565" color="#FFF" size="32" padding="20px" radius="0" square_size="no" ] [icon icon="licon: pisces" background="#2c3e50" color="#FFF" size="32" padding="20px" radius="0" square_size="no" ] [icon icon="licon: arrows-switch-vertical" background="#f1c40f" color="#FFF" size="32" padding="20px" radius="0" square_size="no" ] [icon icon="licon: arrows-drag-horiz" background="#3498db" color="#FFF" size="32" padding="20px" radius="0" square_size="no" ] [icon icon="licon: arrows-shrink-diagonal2" background="#2ecc71" color="#FFF" size="32" padding="20px" radius="0" square_size="no" ] [icon icon="licon: arrows-switch-horizontal" background="#d35400" color="#FFF" size="32" padding="20px" radius="0" square_size="no" ] [icon icon="licon: clock" background="#8e44ad" color="#FFF" size="32" padding="20px" radius="0" square_size="no" ] [icon icon="licon: video" background="#686565" color="#FFF" size="32" padding="20px" radius="0" square_size="no" ]
