Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
OrganizationEventAdvent CalendarQiitadon (β)
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

Font Awesome 5 Freeで疑似要素(:after,:before)のcontent指定する場合

Font Awesome5のフリー版CDNを使った場合、疑似要素(:after,:before)のcontentにアイコンを指定する方法が、ver4とちょっとだけ違っていてハマったのでメモします。


<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

CSSで font-family: "Font Awesome 5 Free";と指定

a::after {
  font-family: "Font Awesome 5 Free";
  content: "\f107";

  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;

ちなみにPro版だと font-weight: 900 (Solid), 400 (Regular or Brands), 300 (Light) と切り替えられるみたいです。

参考: https://fontawesome.com/how-to-use/web-fonts-with-css#pseudo-elements

追記) 2018.03.07
一部のアイコンには、 font-weight: bold; を指定しないと表示されない模様。現在調査中です。



.twitter::before {
  font-family: "Font Awesome 5 Brands";
  content: "\f099";



JS版だと 疑似要素内のfont-familyを検索して、SVGに置換してくれる。


  FontAwesomeConfig = { searchPseudoElements: true };
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

CSSの疑似要素に font-family、contentをそれぞれ記述

  • display: none; が必須。
  • font-familyで Solid,Regular,Brandsを指定
.sample1::before {
  display: none;
  font-family: "Font Awesome 5 Solid";
  content: "\f007";
.sample2::before {
  display: none;
  font-family: "Font Awesome 5 Regular";
  content: "\f1ea";
.sample3::before {
  display: none;
  font-family: "Font Awesome 5 Brands";
  content: "\f099";

.sample1 は実際にこんなHTMLに変換されます。

<a class="sample1"><svg class="svg-inline--fa fa-user fa-w-16" data-fa-pseudo-element=":after" aria-hidden="true" data-prefix="fas" data-icon="user" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 0c88.366 0 160 71.634 160 160s-71.634 160-160 160S96 248.366 96 160 167.634 0 256 0zm183.283 333.821l-71.313-17.828c-74.923 53.89-165.738 41.864-223.94 0l-71.313 17.828C29.981 344.505 0 382.903 0 426.955V464c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48v-37.045c0-44.052-29.981-82.45-72.717-93.134z"></path></svg><!-- <i class="fas" data-fa-pseudo-element=":after"></i> --></a>

font-familyの指定を "Solid" を "Regular" に変えてもフリー版にない太さだったら表示されないので注意。

参考: https://fontawesome.com/how-to-use/svg-with-js#pseudo-elements

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Help us understand the problem. What are the problem?