Shortcodes / Icon Box
Icon Box
… Add a Icon Box
Add a Icon Box HTML
- In your blogger dashboard.
- Go to "Layout".
- Locate the section.
- Click on "Add a Gadget" and we recommend adding these widget:
+ Widget "HTML/JavaScript" To add component codes.
- Select and paste the Code
- Select "#" and paste you link.
- Click "Save".
Edit Code:
- Copy the code.
- Open notepad or a code editor.
- select code "class size" and "Any of the styles".
- Paste the code in "Your class".
- Paste your link in "Your link".
- Add your title in "Your title".
Code:
Not link.
<div class=" You Class "> You Title </div>
With link.
<a class=" You Class " href=" You Link "> You Title </a>
Code Class:
… Class Size
icon-box-1x
icon-box-2x
icon-box-3x
icon-box-4x
Not link.
<div class="icon-box-1x">icon box</div>
With link.
<a class="icon-box-1x" href="#">icon box</a>
… Theme Color
theme-primary
theme-dark
theme-secondary
theme-light
theme-success
theme-danger
theme-warning
theme-info
Not link.
<div class="icon-box-1x theme-primary">Primary icon box</div>
With link.
<a class="icon-box-1x theme-primary" href="#">Primary icon box</a>
… Theme Outline
theme-outline-primary
theme-outline-dark
theme-outline-secondary
theme-outline-light
theme-outline-success
theme-outline-danger
theme-outline-warning
theme-outline-info
Not link.
<div class="icon-box-1x theme-outline-primary">icon box Outline</div>
With link.
<a class="icon-box-1x theme-outline-primary" href="#">icon box Outline</a>
… Theme Flat
theme-flat-primary
theme-flat-dark
theme-flat-secondary
theme-flat-light
theme-flat-success
theme-flat-danger
theme-flat-warning
theme-flat-info
Not link.
<div class="icon-box-1x theme-flat-primary">icon box Flat</div>
With link.
<a class="icon-box-1x theme-flat-primary" href="#">icon box Flat</a>
… Theme Link
theme-link-primary
theme-link-dark
theme-link-secondary
theme-link-light
theme-link-success
theme-link-danger
theme-link-warning
theme-link-info
Not link.
<div class="icon-box-1x theme-link-primary">icon box Link</div>
With link.
<a class="icon-box-1x theme-link-primary" href="#">icon box link</a>
… Add Fontawesome
Add Icon:
- Go to Page Fontawesome.
- Search icons and click on the icon.
- Click name; Will be copied
- Paste the name in "Your class".
Not link.
<div class="icon-box-1x theme-primary fab fa-house">icon box Link</div>
With link.
<a class="icon-box-1x theme-primary fab fa-house" href="#">icon box link</a>