--- id: 60b69a66b6ddb80858c5159b title: Step 37 challengeType: 0 dashedName: step-37 --- # --description-- È ora di usare alcune icone FontAwesome . L'elemento `i` è usato per il testo idiomatico o il testo che è separato dal "normale" contenuto di testo. Può essere usato per il testo in _corsivo_, per i termini scientifici o per icone, come quelle fornite da FontAwesome. All'interno dell'elemento `white-paper`, aggiungi quattro elementi `i`. Assegna loro un valore di `class` di `fas fa-music`. Questa classe speciale viene usata da FontAwesome per determinare quale icona caricare. `fas` indica la categoria delle icone (FontAwesome Solid, in questo caso), mentre `fa-music` seleziona l'icona specifica. # --hints-- Dovresti avere quattro nuovi elementi `i` all'interno dell'elemento `#white-paper`. ```js assert(document.querySelectorAll('#white-paper > i')?.length === 4); ``` Tutti gli elementi `i` dovrebbero avere l'attributo `class` impostato su `fas fa-music`. ```js const icons = document.querySelectorAll('#white-paper > i'); for (const icon of icons) { assert(icon.classList?.contains('fas')); assert(icon.classList?.contains('fa-music')); }; ``` # --seed-- ## --seed-contents-- ```html Picasso Painting
--fcc-editable-region-- --fcc-editable-region--
``` ```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; } ```