Pull (Float)
Float an icon to the left or right so surrounding text wraps around it.
Pull Classes
| Class | Description |
|---|---|
.trker-pull-left |
Floats the icon to the left, text wraps on the right |
.trker-pull-right |
Floats the icon to the right, text wraps on the left |
Usage
Combine with a size class to make the icon large enough to be worth floating:
<div class="clearfix">
<i class="trker trker-quote trker-pull-left trker-3x text-primary"></i>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque habitant morbi tristique senectus et netus.
</p>
</div>Clearfix
Because pull uses CSS float, the parent container needs a clearfix to contain the floated element. Add clearfix (Bootstrap) or overflow-hidden (Tailwind) to the parent:
<!-- Tailwind -->
<div class="overflow-hidden">
<i class="trker trker-info trker-pull-left trker-2x"></i>
<p>Important notice text goes here.</p>
</div>
<!-- Bootstrap -->
<div class="clearfix">
<i class="trker trker-info trker-pull-left trker-2x"></i>
<p>Important notice text goes here.</p>
</div>