アイコンの角度を変える

FontAwesomeのアイコンの角度を変えます。左右や上下で反転することもできます。

FontAwesomeのクラスを使う

アイコンの角度を変えるクラスもFontAwesomeには用意されています。

HTML

<i class="fas fa-dog fa-rotate-90"></i> <!-- 時計回りに90度 -->
<i class="fas fa-dog fa-rotate-180"></i> <!-- 時計回りに180度 -->
<i class="fas fa-dog fa-rotate-270"></i> <!-- 時計回りに270度 -->
<i class="fas fa-dog fa-flip-horizontal"></i> <!-- 左右反転 -->
<i class="fas fa-dog fa-flip-vertical"></i> <!-- 上下反転 -->
<i class="fas fa-dog fa-flip-both"></i> <!-- 上下左右反転 -->

HTMLタグにスタイルを追加する

HTMLタグでアイコンの角度を変えたい場合は、transform:rotate()のスタイルを追加します。スタイルで追加する場合はより細かい設定が可能です。

HTML

<i class="fas fa-dog" style="transform:rotate(90deg);"></i> <!-- 時計回りに90度 -->
<i class="fas fa-dog" style="transform:rotate(180deg);"></i> <!-- 時計回りに180度 -->
<i class="fas fa-dog" style="transform:rotate(270deg);"></i> <!-- 時計回りに270度 -->
<i class="fas fa-dog" style="transform:rotate(90deg);"></i> <!-- 時計回りに90度 -->
<i class="fas fa-dog" style="transform:rotateY(180deg);"></i> <!-- 左右反転 -->
<i class="fas fa-dog" style="transform:rotateX(180deg);"></i> <!-- 上下反転 -->
<i class="fas fa-dog" style="transform:rotateY(180deg) rotateX(180deg);"></i> <!-- 上下左右反転 -->

CSSでスタイルを指定する

CSSで角度を変えたい場合にもHTMLタグと同様にtransform:rotate()のスタイルを追加します。インライン要素には適用できないので、display:inline-block;も追加します。

.icon:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f6d3';
	display: inline-block;
	transform: rotate(90deg);
}