この記事では、CSS・HTMLコードによるFont Awesomeアイコンの指定方法とそのバリエーションについてご紹介します。
https://unsplash.com/ja/@foxfox
見出し・コード表記にアイコンを自動付与
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; }
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; }