Search code examples
cssfont-awesome-5

FontAwesome 5 Unicode Support with inline font css

I am using a library which does not support a font-weight property but instead fontstyle is defined by font css property as explaned here

So I tested FontAwesome 5 with setting the fontstyle by font css property but it does not work. Am I doing something wrong or is FontAwesome 5 not supporting this mode of defining the fontstyle?

.calendar::before {
  font-family: "Font Awesome 5 Free";  /* updated font-family */
  font-weight: 400; /* regular style/weight */
  content: "\f133";
}

.calendar2::before {
  font: "400 Font Awesome 5 Free";  /* updated font-family */
  content: "\f133";
}
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet"/>
<div class="calendar"></div>

<div class="calendar2"></div>

Solution

  • This doesn't really have anything to do with FontAwesome.

    When specifying font, you are required to include at least font-size (which must be a size in this situation, not initial, inherit, or unset) and font-family.

    From MDN:

    If font is specified as a shorthand for several font-related properties, then:

    • it must include values for:
      <font-size>
      <font-family>
    • it may optionally include values for:
      <font-style>
      <font-variant>
      <font-weight>
      <line-height>

    • font-style, font-variant and font-weight must precede font-size

    • font-variant may only specify the values defined in CSS 2.1, that is normal and small-caps

    • line-height must immediately follow font-size, preceded by "/", like this: "16px/3"
    • font-family must be the last value specified.

    Also note that, if you do leave out optional values, the default normal is used in their place, overriding values set previously.

    Try instead:

    .calendar::before {
  font-family: "Font Awesome 5 Free";  /* updated font-family */
  font-weight: 400; /* regular style/weight */
  content: "\f133";
}

.calendar2::before {
  font: 400 16px "Font Awesome 5 Free";  /* updated font-family */
  content: "\f133";
}
    <link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet"/>
<div class="calendar"></div>

<div class="calendar2"></div>