<div class="lettericon" data-text="A" data-color="auto"></div>
<div class="lettericon" data-text="1" data-color="auto"></div>
Sizes
Add
data-size
attribute with value
sm
or
lg
to your letter-icon element to change its size.
Two Letters
Add
data-char-count="2"
attribute to show the first two uppercase characters.
ClipTheme
Custom Color
Add a custom color in the attribute
data-color
. You can also add attribute
data-custom-class
to set your own class.
Icons
Use attribute
data-icon
instead attribute
data-text
to show an icon.
<div class="lettericon" data-text="A" data-color="auto" data-box="round"></div>
<div class="lettericon" data-text="1" data-color="auto" data-box="round"></div>
Sizes
Add
data-size
attribute with value
sm
or
lg
to your letter-icon element to change its size.
Two Letters
Add
data-char-count="2"
attribute to show the first two uppercase characters.
ClipTheme
Custom Color
Add a custom color in the attribute
data-color
. You can also add attribute
data-custom-class
to set your own class.
Icons
Use attribute
data-icon
instead attribute
data-text
to show an icon.
<div class="lettericon" data-text="A" data-color="auto" data-box="circle"></div>
<div class="lettericon" data-text="1" data-color="auto" data-box="circle"></div>
Sizes
Add
data-size
attribute with value
sm
or
lg
to your letter-icon element to change its size.
Two Letters
Add
data-char-count="2"
attribute to show the first two uppercase characters.
ClipTheme
Custom Color
Add a custom color in the attribute
data-color
. You can also add attribute
data-custom-class
to set your own class.
Icons
Use attribute
data-icon
instead attribute
data-text
to show an icon.
