Themeisle font awesome icon Usage,CSS Class Name,SVG & CSS Content Code

Themeisle font awesome icon css class name is fa-themeisle and CSS Content Code is \f2b2.

Themeisle font awesome icon is part of brands icons.

Themeisle font awesome icon usage

We can display Themeisle font awesome icon using 3 different ways depending upon our requirement.

1. Using CSS Class Name

2. Using CSS Content Code

3. Using SVG

Themeisle font awesome icon CSS class name

To display Themeisle font awesome icon, add predefined class name i.e.,fa-themeisle (with prefix fa-) to the i tag.

And we need to add corresponding font awesome icon style for the Themeisle icon.

Themeisle icon has 1 icon style i.e.,brands. We need to append icon style class fab.

<i class='fab fa-themeisle'></i>

Themeisle font awesome icon CSS Content Code

We can display Themeisle font awesome icon using it’s CSS Content Code \f2b2

Use the following HTML code

<li><span class='Themeisle fontawesomeicon'></span>Themeisle</li>

Apply CSS code

<style> 
.fontawesomeicon::before {
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
 }

.Themeisle::before {
   font: var(--fa-font-brands);
    content: ' \f2b2';
 }</style>

For the detailed tutorial visit https://www.angularjswiki.com/fontawesome/csscontentcode/

Themeisle font awesome icon SVG

Use the following icon SVG to display Themeisle font awesome icon.

<svg class='fontawesomesvg' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M208 88.286c0-10 6.286-21.714 17.715-21.714 11.142 0 17.714 11.714 17.714 21.714 0 10.285-6.572 21.714-17.714 21.714C214.286 110 208 98.571 208 88.286zm304 160c0 36.001-11.429 102.286-36.286 129.714-22.858 24.858-87.428 61.143-120.857 70.572l-1.143.286v32.571c0 16.286-12.572 30.571-29.143 30.571-10 0-19.429-5.714-24.572-14.286-5.427 8.572-14.856 14.286-24.856 14.286-10 0-19.429-5.714-24.858-14.286-5.142 8.572-14.571 14.286-24.57 14.286-10.286 0-19.429-5.714-24.858-14.286-5.143 8.572-14.571 14.286-24.571 14.286-18.857 0-29.429-15.714-29.429-32.857-16.286 12.285-35.715 19.428-56.571 19.428-22 0-43.429-8.285-60.286-22.857 10.285-.286 20.571-2.286 30.285-5.714-20.857-5.714-39.428-18.857-52-36.286 21.37 4.645 46.209 1.673 67.143-11.143-22-22-56.571-58.857-68.572-87.428C1.143 321.714 0 303.714 0 289.429c0-49.714 20.286-160 86.286-160 10.571 0 18.857 4.858 23.143 14.857a158.792 158.792 0 0 1 12-15.428c2-2.572 5.714-5.429 7.143-8.286 7.999-12.571 11.714-21.142 21.714-34C182.571 45.428 232 17.143 285.143 17.143c6 0 12 .285 17.714 1.143C313.714 6.571 328.857 0 344.572 0c14.571 0 29.714 6 40 16.286.857.858 1.428 2.286 1.428 3.428 0 3.714-10.285 13.429-12.857 16.286 4.286 1.429 15.714 6.858 15.714 12 0 2.857-2.857 5.143-4.571 7.143 31.429 27.714 49.429 67.143 56.286 108 4.286-5.143 10.285-8.572 17.143-8.572 10.571 0 20.857 7.144 28.571 14.001C507.143 187.143 512 221.714 512 248.286zM188 89.428c0 18.286 12.571 37.143 32.286 37.143 19.714 0 32.285-18.857 32.285-37.143 0-18-12.571-36.857-32.285-36.857-19.715 0-32.286 18.858-32.286 36.857zM237.714 194c0-19.714 3.714-39.143 8.571-58.286-52.039 79.534-13.531 184.571 68.858 184.571 21.428 0 42.571-7.714 60-20 2-7.429 3.714-14.857 3.714-22.572 0-14.286-6.286-21.428-20.572-21.428-4.571 0-9.143.857-13.429 1.714-63.343 12.668-107.142 3.669-107.142-63.999zm-41.142 254.858c0-11.143-8.858-20.857-20.286-20.857-11.429 0-20 9.715-20 20.857v32.571c0 11.143 8.571 21.142 20 21.142 11.428 0 20.286-9.715 20.286-21.142v-32.571zm49.143 0c0-11.143-8.572-20.857-20-20.857-11.429 0-20.286 9.715-20.286 20.857v32.571c0 11.143 8.857 21.142 20.286 21.142 11.428 0 20-10 20-21.142v-32.571zm49.713 0c0-11.143-8.857-20.857-20.285-20.857-11.429 0-20.286 9.715-20.286 20.857v32.571c0 11.143 8.857 21.142 20.286 21.142 11.428 0 20.285-9.715 20.285-21.142v-32.571zm49.715 0c0-11.143-8.857-20.857-20.286-20.857-11.428 0-20.286 9.715-20.286 20.857v32.571c0 11.143 8.858 21.142 20.286 21.142 11.429 0 20.286-10 20.286-21.142v-32.571zM421.714 286c-30.857 59.142-90.285 102.572-158.571 102.572-96.571 0-160.571-84.572-160.571-176.572 0-16.857 2-33.429 6-49.714-20 33.715-29.714 72.572-29.714 111.429 0 60.286 24.857 121.715 71.429 160.857 5.143-9.714 14.857-16.286 26-16.286 10 0 19.428 5.714 24.571 14.286 5.429-8.571 14.571-14.286 24.858-14.286 10 0 19.428 5.714 24.571 14.286 5.429-8.571 14.857-14.286 24.858-14.286 10 0 19.428 5.714 24.857 14.286 5.143-8.571 14.571-14.286 24.572-14.286 10.857 0 20.857 6.572 25.714 16 43.427-36.286 68.569-92 71.426-148.286zm10.572-99.714c0-53.714-34.571-105.714-92.572-105.714-30.285 0-58.571 15.143-78.857 36.857C240.862 183.812 233.41 254 302.286 254c28.805 0 97.357-28.538 84.286 36.857 28.857-26 45.714-65.714 45.714-104.571z"/></svg>

Use the following HTML code

<p>This <svg class='fontawesomesvg' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M208 88.286c0-10 6.286-21.714 17.715-21.714 11.142 0 17.714 11.714 17.714 21.714 0 10.285-6.572 21.714-17.714 21.714C214.286 110 208 98.571 208 88.286zm304 160c0 36.001-11.429 102.286-36.286 129.714-22.858 24.858-87.428 61.143-120.857 70.572l-1.143.286v32.571c0 16.286-12.572 30.571-29.143 30.571-10 0-19.429-5.714-24.572-14.286-5.427 8.572-14.856 14.286-24.856 14.286-10 0-19.429-5.714-24.858-14.286-5.142 8.572-14.571 14.286-24.57 14.286-10.286 0-19.429-5.714-24.858-14.286-5.143 8.572-14.571 14.286-24.571 14.286-18.857 0-29.429-15.714-29.429-32.857-16.286 12.285-35.715 19.428-56.571 19.428-22 0-43.429-8.285-60.286-22.857 10.285-.286 20.571-2.286 30.285-5.714-20.857-5.714-39.428-18.857-52-36.286 21.37 4.645 46.209 1.673 67.143-11.143-22-22-56.571-58.857-68.572-87.428C1.143 321.714 0 303.714 0 289.429c0-49.714 20.286-160 86.286-160 10.571 0 18.857 4.858 23.143 14.857a158.792 158.792 0 0 1 12-15.428c2-2.572 5.714-5.429 7.143-8.286 7.999-12.571 11.714-21.142 21.714-34C182.571 45.428 232 17.143 285.143 17.143c6 0 12 .285 17.714 1.143C313.714 6.571 328.857 0 344.572 0c14.571 0 29.714 6 40 16.286.857.858 1.428 2.286 1.428 3.428 0 3.714-10.285 13.429-12.857 16.286 4.286 1.429 15.714 6.858 15.714 12 0 2.857-2.857 5.143-4.571 7.143 31.429 27.714 49.429 67.143 56.286 108 4.286-5.143 10.285-8.572 17.143-8.572 10.571 0 20.857 7.144 28.571 14.001C507.143 187.143 512 221.714 512 248.286zM188 89.428c0 18.286 12.571 37.143 32.286 37.143 19.714 0 32.285-18.857 32.285-37.143 0-18-12.571-36.857-32.285-36.857-19.715 0-32.286 18.858-32.286 36.857zM237.714 194c0-19.714 3.714-39.143 8.571-58.286-52.039 79.534-13.531 184.571 68.858 184.571 21.428 0 42.571-7.714 60-20 2-7.429 3.714-14.857 3.714-22.572 0-14.286-6.286-21.428-20.572-21.428-4.571 0-9.143.857-13.429 1.714-63.343 12.668-107.142 3.669-107.142-63.999zm-41.142 254.858c0-11.143-8.858-20.857-20.286-20.857-11.429 0-20 9.715-20 20.857v32.571c0 11.143 8.571 21.142 20 21.142 11.428 0 20.286-9.715 20.286-21.142v-32.571zm49.143 0c0-11.143-8.572-20.857-20-20.857-11.429 0-20.286 9.715-20.286 20.857v32.571c0 11.143 8.857 21.142 20.286 21.142 11.428 0 20-10 20-21.142v-32.571zm49.713 0c0-11.143-8.857-20.857-20.285-20.857-11.429 0-20.286 9.715-20.286 20.857v32.571c0 11.143 8.857 21.142 20.286 21.142 11.428 0 20.285-9.715 20.285-21.142v-32.571zm49.715 0c0-11.143-8.857-20.857-20.286-20.857-11.428 0-20.286 9.715-20.286 20.857v32.571c0 11.143 8.858 21.142 20.286 21.142 11.429 0 20.286-10 20.286-21.142v-32.571zM421.714 286c-30.857 59.142-90.285 102.572-158.571 102.572-96.571 0-160.571-84.572-160.571-176.572 0-16.857 2-33.429 6-49.714-20 33.715-29.714 72.572-29.714 111.429 0 60.286 24.857 121.715 71.429 160.857 5.143-9.714 14.857-16.286 26-16.286 10 0 19.428 5.714 24.571 14.286 5.429-8.571 14.571-14.286 24.858-14.286 10 0 19.428 5.714 24.571 14.286 5.429-8.571 14.857-14.286 24.858-14.286 10 0 19.428 5.714 24.857 14.286 5.143-8.571 14.571-14.286 24.572-14.286 10.857 0 20.857 6.572 25.714 16 43.427-36.286 68.569-92 71.426-148.286zm10.572-99.714c0-53.714-34.571-105.714-92.572-105.714-30.285 0-58.571 15.143-78.857 36.857C240.862 183.812 233.41 254 302.286 254c28.805 0 97.357-28.538 84.286 36.857 28.857-26 45.714-65.714 45.714-104.571z"/></svg>
 Themeisle displayed using SVG</p>

Apply CSS code

  <style>
    .fontawesomesvg {width: 1em;
      height: 1em;
      vertical-align: -.125em;
    }
  </style>

Change Themeisle font awesome icon size

To increase Themeisle font awesome icon size, use the fa-lg(33 % increase), fa-2x, fa-3x, fa-4x, or fa-5x classes along with icon class \f2b2. Increase in icon size will be relative to their parent container.

<i class='fab fa-themeisle fa-lg'>fa-lg</i><br/>
<i class='fab fa-themeisle fa-2x'>fa-2x</i><br/>
<i class='fab fa-themeisle fa-3x'>fa-3x</i><br/>
<i class='fab fa-themeisle fa-4x'>fa-4x</i><br/>
<i class='fab fa-themeisle fa-5x'>fa-5x</i><br/>

Themeisle font awesome icon with Fixed Width

All the font awesome icons does not have same width.

For example Themeisle icon and home icon may not have same height and width.

So to display two icons with fixed width and height we can use fa-fw class.

<i style='border:1px solid;' class='fab fa-themeisle fa-fw fa-3x'></i>Fixed Width<i style='border:1px solid;' class='fab fa-themeisle fa-3x'></i>Normal<br/>
<i style='border:1px solid;' class='fas fa-home fa-fw fa-3x'></i>Fixed Width<i style='border:1px solid;' class='fas fa-home fa-3x'></i>Normal<br/>

Themeisle font awesome icon Border

To add border to Themeisle font awesome icon, use fa-border class.

<i class='fab fa-themeisle fa-border fa-3x'></i>

Pull Themeisle font awesome icon To the left

To pull Themeisle icon to the left of the container use fa-pull-left class.

<div style='width: 200px;'>
<i class='fab fa-themeisle fa-pull-left fa-3x'></i>
  ... The text after Themeisle Icon will be displayed on the right side of the icon.
</div>
<div style = 'clear: both;'></div>

Pull Themeisle font awesome icon To the left

To pull Themeisle icon to the right of the container use fa-pull-right class.

<div style='width: 200px;'>
<i class='fab fa-themeisle fa-pull-right fa-3x'></i>
  ... The text after Themeisle Icon will be displayed on the left side of the icon.
</div>
<div style = 'clear: both;'></div>

Animate Themeisle font awesome icon

To animate Themeisle font awesome icon, use fa-spin class.

<i class='fab fa-themeisle fa-spin fa-3x'></i>

Animate Themeisle font awesome icon with steps

While animating the font awesome icon,We can rotate Themeisle icon in 8 steps instead of uniform rotation.

We can use fa-pulse icon along with fa-spin class.

<i class='fab fa-themeisle fa-spin fa-pulse fa-3x'></i>

Rotate Themeisle font awesome icon

To rotate Themeisle font awesome icon, Use fa-rotate-x class

Where ‘x’ represents degree of rotation.

<div>
<i class='fab fa-themeisle fa-3x'>R</i>normal<br/><br/>
<i class='fab fa-themeisle fa-rotate-90 fa-3x'>R</i> fa-rotate-90<br/><br/> 
<i class='fab fa-themeisle fa-rotate-180  fa-3x'>R</i> fa-rotate-180<br/><br/> 
<i class='fab fa-themeisle fa-rotate-270 fa-3x'>R</i> fa-rotate-270<br/><br/>
</div>

Flip Themeisle font awesome icon

To flip Themeisle font awesome icon horizontally and vertically use fa-flip-horizontal and fa-flip-vertical classes.

<div>
<i class='fab fa-themeisle fa-3x'>F</i> Normal <br>
<i class='fab fa-themeisle fa-flip-horizontal fa-3x'>F</i> fa-flip-horizontal<br>
<i class='fab fa-themeisle fa-flip-vertical fa-3x'>F</i> fa-flip-vertical<br>
</div>

Combine Themeisle font awesome icon with other font awesome icons

In font awesome icons,using stacking we can combine multiple icons and display it as one icon.

To do that use the fa-stack class on the parent, the fa-stack-1x for the regularly sized icon, and fa-stack-2x for the larger icon.

And use class fa-inverse for an alternative icon color.

In the below example, I am displaying Themeisle font awesome icon on top of icons like fa-square,fa-circle and fa-ban.

And used fa-inverse in the second example to invert the color of the icon.

<div>
    <span class='fa-stack fa-lg'>
        <i class='far fa-square fa-stack-2x'></i>
        <i class='fab fa-themeisle fa-stack-1x'></i>
    </span>
      Themeisle on fa-square<br>
    <span class='fa-stack fa-lg'>
        <i class='fas fa-circle fa-stack-2x'></i>
        <i class='fab fa-themeisle fa-stack-1x fa-inverse'></i>
    </span>
      Themeisle on fa-circle<br>

    <span class='fa-stack fa-lg'>
        <i class='fab fa-themeisle fa-stack-1x'></i>
        <i class='fas fa-ban fa-stack-2x'></i>
    </span>
      Themeisle on fa-ban
</div>