# Styling with Font Awesome

Overview of styling options and techniques for Font Awesome icons on the web.

<!-- markdownlint-disable -->

> Font Awesome has a ton of great styling tools for the web that work hand-in-hand with our icons to really make your project look its best.

https://www.youtube.com/watch?v=cZtJZQ1BugI

Many of the styles can be combined to get even more effects, though some are only available when using our [SVG+JS method](/web/setup/host-yourself/svg-js.md).

<div class="wa-grid" style="grid-template-columns: repeat(2, 1fr);">

<a style="text-decoration: none;" href="/web/style/basics.md">

		<h4 class="feature-card-title"> Basics</h4>

Out of the box styling

</a>

<a style="text-decoration: none;" href="/web/style/size.md">

    <h4 class="feature-card-title">

    Size
    </h4>

Make Icons Bigger or Smaller

</a>

<a style="text-decoration: none;" href="/web/style/icon-canvas.md">

    <h4 class="feature-card-title">

    The Icon Canvas
    </h4>

Adjust icon width for alignment

</a>

<a style="text-decoration: none;" href="/web/style/lists.md">

<h4 class="feature-card-title">

Icons in a List
</h4>

Use icons as list bullets

</a>

<a style="text-decoration: none;" href="/web/style/rotate.md">

<h4 class="feature-card-title">

Rotate
</h4>

Shift icons around an axis

</a>

<a style="text-decoration: none;" href="/web/style/animate.md">

<h4 class="feature-card-title">

Animate
</h4>

Add motion to your icons

</a>

<a style="text-decoration: none;" href="/web/style/pull.md">

<h4 class="feature-card-title">

Border + Pull
</h4>

Bring icons inline with text

</a>

<a style="text-decoration: none;" href="/web/style/stack.md">

<h4 class="feature-card-title">

Stack
</h4>

Stack two icons to make a new one

</a>

<a style="text-decoration: none;" href="/web/style/duotone.md">

<h4 class="feature-card-title">

Duotone
</h4>

The power of duotone icons

</a>

<a style="text-decoration: none;" href="/web/style/custom.md">

<h4 class="feature-card-title">

Customize
</h4>

Make it Your Own

</a>

<a style="text-decoration: none;" href="/web/style/power-transform.md">

<h4 class="feature-card-title">

Power Transform

</h4>
Fine-tuned rotation, sizing, and positioning
SVG + JS only

</a>

<a style="text-decoration: none;" href="/web/style/mask.md">

<h4 class="feature-card-title">

Mask

</h4>
Combine icons with transparency
SVG + JS only

</a>

<a style="text-decoration: none;" href="/web/style/layer.md">

<h4 class="feature-card-title">

Layer

</h4>
Combine two icons with transparency
SVG + JS only

</a>

<a style="text-decoration: none;" href="/web/style/layer.md">

<h4 class="feature-card-title">

Add Text or Counters
</h4>
Add a layer of text or a counter to an icon
SVG + JS only

</a>

</div>