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

Jsfiddle font awesome icon css class name is fa-jsfiddle and CSS Content Code is \f1cc.

Jsfiddle font awesome icon is part of brands icons.

Jsfiddle font awesome icon usage

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

1. Using CSS Class Name

2. Using CSS Content Code

3. Using SVG

Jsfiddle font awesome icon CSS class name

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

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

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

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

Jsfiddle font awesome icon CSS Content Code

We can display Jsfiddle font awesome icon using it’s CSS Content Code \f1cc

Use the following HTML code

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

Apply CSS code

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

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

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

Jsfiddle font awesome icon SVG

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

<svg class='fontawesomesvg' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 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="M510.634 237.462c-4.727-2.621-5.664-5.748-6.381-10.776-2.352-16.488-3.539-33.619-9.097-49.095-35.895-99.957-153.99-143.386-246.849-91.646-27.37 15.25-48.971 36.369-65.493 63.903-3.184-1.508-5.458-2.71-7.824-3.686-30.102-12.421-59.049-10.121-85.331 9.167-25.531 18.737-36.422 44.548-32.676 76.408.355 3.025-1.967 7.621-4.514 9.545-39.712 29.992-56.031 78.065-41.902 124.615 13.831 45.569 57.514 79.796 105.608 81.433 30.291 1.031 60.637.546 90.959.539 84.041-.021 168.09.531 252.12-.48 52.664-.634 96.108-36.873 108.212-87.293 11.54-48.074-11.144-97.3-56.832-122.634zm21.107 156.88c-18.23 22.432-42.343 35.253-71.28 35.65-56.874.781-113.767.23-170.652.23 0 .7-163.028.159-163.728.154-43.861-.332-76.739-19.766-95.175-59.995-18.902-41.245-4.004-90.848 34.186-116.106 9.182-6.073 12.505-11.566 10.096-23.136-5.49-26.361 4.453-47.956 26.42-62.981 22.987-15.723 47.422-16.146 72.034-3.083 10.269 5.45 14.607 11.564 22.198-2.527 14.222-26.399 34.557-46.727 60.671-61.294 97.46-54.366 228.37 7.568 230.24 132.697.122 8.15 2.412 12.428 9.848 15.894 57.56 26.829 74.456 96.122 35.142 144.497zm-87.789-80.499c-5.848 31.157-34.622 55.096-66.666 55.095-16.953-.001-32.058-6.545-44.079-17.705-27.697-25.713-71.141-74.98-95.937-93.387-20.056-14.888-41.99-12.333-60.272 3.782-49.996 44.071 15.859 121.775 67.063 77.188 4.548-3.96 7.84-9.543 12.744-12.844 8.184-5.509 20.766-.884 13.168 10.622-17.358 26.284-49.33 38.197-78.863 29.301-28.897-8.704-48.84-35.968-48.626-70.179 1.225-22.485 12.364-43.06 35.414-55.965 22.575-12.638 46.369-13.146 66.991 2.474C295.68 280.7 320.467 323.97 352.185 343.47c24.558 15.099 54.254 7.363 68.823-17.506 28.83-49.209-34.592-105.016-78.868-63.46-3.989 3.744-6.917 8.932-11.41 11.72-10.975 6.811-17.333-4.113-12.809-10.353 20.703-28.554 50.464-40.44 83.271-28.214 31.429 11.714 49.108 44.366 42.76 78.186z"/></svg>

Use the following HTML code

<p>This <svg class='fontawesomesvg' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 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="M510.634 237.462c-4.727-2.621-5.664-5.748-6.381-10.776-2.352-16.488-3.539-33.619-9.097-49.095-35.895-99.957-153.99-143.386-246.849-91.646-27.37 15.25-48.971 36.369-65.493 63.903-3.184-1.508-5.458-2.71-7.824-3.686-30.102-12.421-59.049-10.121-85.331 9.167-25.531 18.737-36.422 44.548-32.676 76.408.355 3.025-1.967 7.621-4.514 9.545-39.712 29.992-56.031 78.065-41.902 124.615 13.831 45.569 57.514 79.796 105.608 81.433 30.291 1.031 60.637.546 90.959.539 84.041-.021 168.09.531 252.12-.48 52.664-.634 96.108-36.873 108.212-87.293 11.54-48.074-11.144-97.3-56.832-122.634zm21.107 156.88c-18.23 22.432-42.343 35.253-71.28 35.65-56.874.781-113.767.23-170.652.23 0 .7-163.028.159-163.728.154-43.861-.332-76.739-19.766-95.175-59.995-18.902-41.245-4.004-90.848 34.186-116.106 9.182-6.073 12.505-11.566 10.096-23.136-5.49-26.361 4.453-47.956 26.42-62.981 22.987-15.723 47.422-16.146 72.034-3.083 10.269 5.45 14.607 11.564 22.198-2.527 14.222-26.399 34.557-46.727 60.671-61.294 97.46-54.366 228.37 7.568 230.24 132.697.122 8.15 2.412 12.428 9.848 15.894 57.56 26.829 74.456 96.122 35.142 144.497zm-87.789-80.499c-5.848 31.157-34.622 55.096-66.666 55.095-16.953-.001-32.058-6.545-44.079-17.705-27.697-25.713-71.141-74.98-95.937-93.387-20.056-14.888-41.99-12.333-60.272 3.782-49.996 44.071 15.859 121.775 67.063 77.188 4.548-3.96 7.84-9.543 12.744-12.844 8.184-5.509 20.766-.884 13.168 10.622-17.358 26.284-49.33 38.197-78.863 29.301-28.897-8.704-48.84-35.968-48.626-70.179 1.225-22.485 12.364-43.06 35.414-55.965 22.575-12.638 46.369-13.146 66.991 2.474C295.68 280.7 320.467 323.97 352.185 343.47c24.558 15.099 54.254 7.363 68.823-17.506 28.83-49.209-34.592-105.016-78.868-63.46-3.989 3.744-6.917 8.932-11.41 11.72-10.975 6.811-17.333-4.113-12.809-10.353 20.703-28.554 50.464-40.44 83.271-28.214 31.429 11.714 49.108 44.366 42.76 78.186z"/></svg>
 Jsfiddle displayed using SVG</p>

Apply CSS code

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

Change Jsfiddle font awesome icon size

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

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

Jsfiddle font awesome icon with Fixed Width

All the font awesome icons does not have same width.

For example Jsfiddle 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-jsfiddle fa-fw fa-3x'></i>Fixed Width<i style='border:1px solid;' class='fab fa-jsfiddle 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/>

Jsfiddle font awesome icon Border

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

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

Pull Jsfiddle font awesome icon To the left

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

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

Pull Jsfiddle font awesome icon To the left

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

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

Animate Jsfiddle font awesome icon

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

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

Animate Jsfiddle font awesome icon with steps

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

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

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

Rotate Jsfiddle font awesome icon

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

Where ‘x’ represents degree of rotation.

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

Flip Jsfiddle font awesome icon

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

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

Combine Jsfiddle 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 Jsfiddle 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-jsfiddle fa-stack-1x'></i>
    </span>
      Jsfiddle on fa-square<br>
    <span class='fa-stack fa-lg'>
        <i class='fas fa-circle fa-stack-2x'></i>
        <i class='fab fa-jsfiddle fa-stack-1x fa-inverse'></i>
    </span>
      Jsfiddle on fa-circle<br>

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