# css+scss

**URL:** https://forum.ficusonline.com/t/topic/429
**Category:** WEB Design
**Created:** [2021 年 8 月 27 日午前 1:03 UTC](https://forum.ficusonline.com/t/topic/429 "2021-08-27T01:03:11Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![tk-fuse](https://forum.ficusonline.com/user_avatar/forum.ficusonline.com/tk-fuse/32/255_2.png) [@tk-fuse](https://forum.ficusonline.com/u/tk-fuse)
#### Post date: [2021 年 8 月 27 日午前 1:03 UTC](https://forum.ficusonline.com/t/topic/429/1 "2021-08-27T01:03:11Z")

</div>

### CSS rem, em

[https://www.w3schools.com/cssref/css\_units.asp](https://www.w3schools.com/cssref/css_units.asp)

### Font Awesome

Font Awsomeテキストにアイコン追加

> **[CSS Pseudo-elements](https://docs-v5.fontawesome.com/web/advanced/css-pseudo-elements)**

 ![fontawsomeicon](https://forum.ficusonline.com/uploads/default/original/1X/613351405bd09558adea59a09f0e6f4276f0f0b2.png)

```auto
<style>
  .icon::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }

  .login::before {
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f007";
  }

  .tps::before {
    font-family: "Font Awesome 5 Free"; font-weight: 400; content: "\f1ea";
  }

  .twitter::before {
    font-family: "Font Awesome 5 Brands"; content: "\f099";
  }
</style>

<ul style="margin: 0;">
  <li><span class="icon login"></span> Login</li>
  <li><span class="icon tps"></span> TPS Reports</li>
  <li><span class="icon twitter"></span> Twitter</li>
</ul>

```