Как сделать блок как на скриншоте?

Question

[владмир Иванов]

https://codepen.io/vladimir-iwanow/pen/mdJjEBY это мой код.это у меня получилось . а сделать надо так
подскажите в чем ошибка у меня при создании блока Социал медия не могу установить иконки как на картинке.

Answer 1

[Sergey]

Вы в коде используете

<svg class="social__icons">
        <use xlink:href="#facebook"> </use>
      </svg>

а где сам facebook ?
типа такого:

<svg height=0 >
   <g id="facebook">
         <polygon points="38.25,0 38.25,357 318.75,178.5" />
   </g>            
</svg>

или в use использовать ссылку на файл

Comments

[владмир Иванов]

это я сделал выше.

[Sergey]

В приведенном вами коде не было этого сделано, поэтому я подумал, что проблема в этом.

[владмир Иванов]

Firsov36,ясно.

Answer 2

[владмир Иванов]

Answer 3

[Арсений Матыцин]

Обратись к сетке. А если ее нет в дизайн-проекте, то додумай сам.
А потом вложенные строки типа flex тебе в помощь. Вариантов на самом деле много, вплоть до обычных таблиц (это плохо вариант, но жизнеспособен).

Ключевое слово «вложенные».

Comments

[владмир Иванов]

я пробовал флексом работать

[Арсений Матыцин]

владмир Иванов, ага, вижу. Кроме того, что код так себе могу добавить, что SVG по своей сути требует фиксированного размера. Иначе все пойдет п...

Короче, ознакомься с форматом поближе.

Answer 4

[Николай]

https://codepen.io/Delta01/pen/GRJBqzR
Как вариант, если еще помощь нужна будет пиши https://vk.com/c_trollface
Можно еще подумать, как упростить всё))

Comments

[владмир Иванов]

спасибо хорошо) я просто учусь