---
id: 60b69a66b6ddb80858c515a6
title: الخطوة 49
challengeType: 0
dashedName: step-49
---

# --description--

يأتوا FrontAwesome icons مع أسلوبهم الخاص لتعريف الأيقونة. ومع ذلك، لا يزال بإمكانك ضبط الأسلوب بنفسك أيضاً، لتغيير أشياء مثل اللون والحجم. حالياً, استخدم منتقي الفئة (class selector) لاستهداف أيقونة (icons) تحتوي على فئة (class) تسمى `fa-music`. عيّن `display` بقيمة `inline-block`, و`margin-top` بقيمة `8%`، و`margin-left` بقيمة `13%`.

# --hints--

يجب أن يكون لديك منتقي `.fa-music`.

```js
assert(new __helpers.CSSHelp(document).getStyle('.fa-music'));
```

يجب أن يحتوي منتقي `.fa-music` على خاصية `display` بقيمة `inline-block`.

```js
assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.display === 'inline-block');
```

يجب أن يكون لمنتقيك `.fa-music` خاصية `margin-top` بقيمة `8%`.

```js
assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginTop === '8%');
```

يجب أن يكون لمنتقيك `.fa-music` خاصية `margin-left` بقيمة `13%`.

```js
assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginLeft === '13%');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Picasso Painting</title>
    <link rel="stylesheet" href="./styles.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
  </head>
  <body>
    <div id="back-wall"></div>
    <div class="characters">
      <div id="offwhite-character">
        <div id="white-hat"></div>
        <div id="black-mask">
          <div class="eyes left"></div>
          <div class="eyes right"></div>
        </div>
        <div id="gray-instrument">
          <div class="black-dot"></div>
          <div class="black-dot"></div>
          <div class="black-dot"></div>
          <div class="black-dot"></div>
          <div class="black-dot"></div>
        </div>
        <div id="tan-table"></div>
      </div>
      <div id="black-character">
        <div id="black-hat"></div>
        <div id="gray-mask">
          <div class="eyes left"></div>
          <div class="eyes right"></div>
        </div>
        <div id="white-paper">
          <i class="fas fa-music"></i>
          <i class="fas fa-music"></i>
          <i class="fas fa-music"></i>
          <i class="fas fa-music"></i>
        </div>
      </div>
    </div>
  </body>
</html>
```

```css
body {
  background-color: rgb(184, 132, 46);
}

#back-wall {
  background-color: #8B4513;
  width: 100%;
  height: 60%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

#offwhite-character {
  width: 300px;
  height: 550px;
  background-color: GhostWhite;
  position: absolute;
  top: 20%;
  left: 17.5%;
}

#white-hat {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 120px 140px 180px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: GhostWhite;
  border-left-color: transparent;
  position: absolute;
  top: -140px;
  left: 0;
}

#black-mask {
  width: 100%;
  height: 50px;
  background-color: rgb(45, 31, 19);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

#gray-instrument {
  width: 15%;
  height: 40%;
  background-color: rgb(167, 162, 117);
  position: absolute;
  top: 50px;
  left: 125px;
  z-index: 1;
}

.black-dot {
  width: 10px;
  height: 10px;
  background-color: rgb(45, 31, 19);
  border-radius: 50%;
  display: block;
  margin: auto;
  margin-top: 65%;
}

#tan-table {
  width: 450px;
  height: 140px;
  background-color: #D2691E;
  position: absolute;
  top: 275px;
  left: 15px;
  z-index: 1;
}

#black-character {
  width: 300px;
  height: 500px;
  background-color: rgb(45, 31, 19);
  position: absolute;
  top: 30%;
  left: 59%;
}

#black-hat {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 150px 0 0 300px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: rgb(45, 31, 19);
  position: absolute;
  top: -150px;
  left: 0;
}

#gray-mask {
  width: 150px;
  height: 150px;
  background-color: rgb(167, 162, 117);
  position: absolute;
  top: -10px;
  left: 70px;
}

#white-paper {
  width: 400px;
  height: 100px;
  background-color: GhostWhite;
  position: absolute;
  top: 250px;
  left: -150px;
  z-index: 1;
}

--fcc-editable-region--

--fcc-editable-region--

```
