Font Awesome・CSSでの指定バリエーション

この記事では、CSS・HTMLコードによるFont Awesomeアイコンの指定方法とそのバリエーションについてご紹介します。

Gray assorted letter jewelries in brown wooden organizer boxes.

https://unsplash.com/ja/@foxfox

fontawesome.com

見出し・コード表記にアイコンを自動付与
フリー版の指定方法
- font-familyの記述
- font-weight
スタック（stack）
Quate（引用）
List Style（リスト）

見出し・コード表記にアイコンを自動付与

HTML

CSS

JavaScript

/* H5のコード見出しにAwesome */
h5#HTML::after {
  font-family:'Font Awesome 6 brands';
  font-weight:400;
  content:'\f13b';
  color:#f06429;
  margin-left:.12em
}
 
h5#CSS::after {
  font-family:'Font Awesome 6 brands';
  font-weight:400;
  content:'\f38b';
  color:#2864f0;
  margin-left:.12em
}

h5#JavaScript::after {
  font-family:'Font Awesome 6 brands';
  font-weight:400;
  content:'\f3b9';
  color:#efd81d;
  margin-left:.12em
}

minify化したコード

クリックでコピー

フリー版の指定方法

font-familyの記述

Solid、Regular: “Font Awesome 6 Free”

ブランドロゴ: “Font Awesome 6 Brands”

font-weight

Solid: 900

Regular、Brands: 400

スタック（stack）

<span class="fa-stack fa-lg">
  <i class="fa-solid fa-square fa-stack-2x"></i>
  <i class="fa-brands fa-html5 fa-lg fa-stack-1x" style="color: #f06429;"></i>
</span>

<span class="fa-stack fa-lg">
  <i class="fa fa-ban fa-stack-2x text-danger" style="color: #d9534f;"></i>
  <i class="fa fa-camera fa-stack-1x"></i>
</span>

.fa-stack-1x {
    font-size: 1.3em;
}

.fa-stack-2x {
    font-size: 2em;
}

fontawesome.com

Quate（引用）

Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
https://html.spec.whatwg.org/multipage/grouping-content.html#the-div-element

以下のクラス名を指定するとFont AwesomeのCDNでスタイルが自動付与される

.fa-pull-left {
    float: left;
    margin-right: var(--fa-pull-margin,.3em);
}

.fa-pull-right {
    float: right;
    margin-left: var(--fa-pull-margin,.3em);
}

.fa-border {
    border-radius: var(--fa-border-radius,.1em);
    border: var(--fa-border-width,.08em) var(--fa-border-style,solid) var(--fa-border-color,#eee);
    padding: var(--fa-border-padding,.2em .25em .15em);
}

.fa-2x {
    font-size: 2em;
}

List Style（リスト）

List icons
can be used
as bullets
in lists

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

以下のクラス名を指定するとFont AwesomeのCDNでスタイルが自動付与される

.fa-ul {
    list-style-type: none;
    margin-left: var(--fa-li-margin,2.5em);
    padding-left: 0;
}

.fa-li {
    left: calc(var(--fa-li-width, 2em)*-1);
    position: absolute;
    text-align: center;
    width: var(--fa-li-width,2em);
    line-height: inherit;
}

fontawesome.com