Some text is here
Some text is here
Some text is here
Some text is here
Some text is here
Some text is here
Some text is here
Some text is here
Some text is here
Description: Some ready to use classes for different alignments for elements with LivIcons
Requires: Bootstrap 3.X for basic grid, buttons, text, etc. styles.
WordPress Note: This example may require theme files customization or using a page builder (composer) at your own. See on it as a starting point.
Important: LivIcons data-options are set to different from these defaults only! If you have another set of the default options please use a full notation of them which you can get from the Configuration tool
<!-- Alignments -->
<div class="container alignments">
<div class="row">
<div class="col-xs-12">
<h3>Horizontal alignment for LivIcon as a single block element</h3>
</div>
<div class="col-sm-4 col-xs-12">
<h4>Left</h4>
<div class="livicon-evo block-left-single" data-options="
name: bell;
size: 60px
"></div>
</div>
<div class="col-sm-4 col-xs-12">
<h4 class="text-center">Center</h4>
<div class="livicon-evo block-center-single" data-options="
name: bell;
size: 60px
"></div>
</div>
<div class="col-sm-4 col-xs-12">
<h4 class="text-right">Right</h4>
<div class="livicon-evo block-right-single" data-options="
name: bell;
size: 60px
"></div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h3>LivIcon as a block element with vertically centered text</h3>
</div>
<div class="col-sm-6 col-xs-12">
<h4>Left</h4>
<div class="livicon-evo block-left-with-text" data-options="
name: briefcase;
size: 60px
"></div>
<p class="vertically-centered-text text-left">Some text is here</p>
</div>
<div class="col-sm-6 col-xs-12">
<h4 class="text-right">Right</h4>
<div class="livicon-evo block-right-with-text" data-options="
name: briefcase;
size: 60px
"></div>
<p class="vertically-centered-text text-right">Some text is here</p>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h3>LivIcon as a single inline-block element</h3>
</div>
<div class="col-sm-4 col-xs-12">
<h4>Left</h4>
<p class="text-left">
<span class="livicon-evo inline-block" data-options="
name: like;
size: 60px
"></span>
</p>
</div>
<div class="col-sm-4 col-xs-12">
<h4 class="text-center">Center</h4>
<p class="text-center">
<span class="livicon-evo inline-block" data-options="
name: like;
size: 60px
"></span>
</p>
</div>
<div class="col-sm-4 col-xs-12">
<h4 class="text-right">Right</h4>
<p class="text-right">
<span class="livicon-evo inline-block" data-options="
name: like;
size: 60px
"></span>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h3>LivIcon as an inline-block element with vertically centered text</h3>
</div>
<div class="col-sm-4 col-xs-12">
<h4>Left</h4>
<p class="text-left">
<span class="livicon-evo inline-block" data-options="
name: gear;
size: 60px
"></span>
<span class="vertically-centered-text">Some text is here</span>
</p>
</div>
<div class="col-sm-4 col-xs-12">
<h4 class="text-center">Center</h4>
<p class="text-center">
<span class="livicon-evo inline-block" data-options="
name: gear;
size: 60px
"></span>
<span class="vertically-centered-text">Some text is here</span>
</p>
</div>
<div class="col-sm-4 col-xs-12">
<h4 class="text-right">Right</h4>
<p class="text-right">
<span class="livicon-evo inline-block" data-options="
name: gear;
size: 60px
"></span>
<span class="vertically-centered-text">Some text is here</span>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h3>Small sized LivIcon as an inline-block element with vertical adjustment</h3>
<br>
</div>
<div class="col-sm-3 col-xs-6">
<p class="text-left">
<span class="livicon-evo vertical-adjust" data-options="
name: morph-login.svg;
style: solid;
size: 18px;
strokeStyle: round;
solidColor: #606060;
eventType:click;
eventOn:parent
"></span>
<span>Some text is here</span>
</p>
</div>
<div class="col-sm-3 col-xs-6">
<p class="text-left">
<span class="livicon-evo vertical-adjust" data-options="
name: morph-bar-chart.svg;
style: solid;
size: 22px;
strokeStyle: round;
solidColor: #606060;
eventType:click;
eventOn:parent
"></span>
<span>Some text is here</span>
</p>
</div>
<div class="col-sm-3 col-xs-6">
<p class="text-left">
<span class="livicon-evo vertical-adjust" data-options="
name: morph-folder.svg;
style: solid;
size: 21px;
strokeStyle: round;
solidColor: #606060;
eventType:click;
eventOn:parent
"></span>
<span>Some text is here</span>
</p>
</div>
<div class="col-sm-3 col-xs-6">
<p class="text-left">
<span class="livicon-evo vertical-adjust" data-options="
name: morph-map.svg;
style: solid;
size: 19px;
strokeStyle: round;
solidColor: #606060;
eventType:click;
eventOn:parent
"></span>
<span>Some text is here</span>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h3>Horizontal and Vertical alignment for LivIcon with "%" width inside a DIV</h3>
</div>
<div class="col-sm-4 col-xs-12">
<h4 class="text-center">Horizontal</h4>
<div class="livicon-parent">
<div class="livicon-evo block-horizontal" data-options="
name: magic;
size: 38%
"></div>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<h4 class="text-center">Vertical</h4>
<div class="livicon-parent">
<div class="livicon-evo block-vertical" data-options="
name: magic;
size: 38%
"></div>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<h4 class="text-center">Both</h4>
<div class="livicon-parent">
<div class="livicon-evo block-both" data-options="
name: magic;
size: 38%
"></div>
</div>
</div>
</div>
</div>
/********** Alignments **********/
.alignments h3 {
margin-top: 100px;
font-size: 22px;
}
.alignments h4 {
margin-top: 40px;
}
.alignments .text-center {
text-align: center;
}
.alignments .text-left {
text-align: left;
}
.alignments .text-right {
text-align: right;
}
.alignments .block-left-single {
/*no additional styles are needed*/
}
.alignments .block-center-single {
margin-top: 0; /*adgust if necessary*/
margin-left: auto;
margin-right: auto;
margin-bottom: 0; /*adgust if necessary*/
}
.alignments .block-right-single {
float: right;
}
.alignments .block-left-with-text {
float: left;
margin-right: 10px; /*adgust if necessary*/
}
.alignments .block-right-with-text {
float: right;
margin-left: 10px; /*adgust if necessary*/
}
.alignments .vertically-centered-text {
height: 60px; /*make it same as LivIcon size*/
line-height: 60px; /*make it same as LivIcon size*/
}
.alignments .inline-block {
display: inline-block;
margin-right: 10px; /*adgust if necessary*/
}
.alignments .vertical-adjust {
display: inline-block;
position: relative;
top: -2px; /*adjust the value according to text size*/
margin-right: 3px; /*adgust if necessary*/
}
.alignments .livicon-parent {
width: 100%;
min-height: 300px; /*just for demonstration*/
position: relative;
background: #eee;
border: 1px solid transparent;
border-radius: 6px;
}
.alignments .block-horizontal {
margin-top: 0; /*adgust if necessary*/
margin-left: auto;
margin-right: auto;
margin-bottom: 0; /*adgust if necessary*/
}
.alignments .block-vertical {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.alignments .block-both {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}