npofopr

Из онлайн инструментов, нравится — https://tinypng.com/ PS: Не стоит читать статьи 2013 года, тем более по оптимизации. Во всяком случае, лучше всегда искать, что по свежее.

Можно ещё у дизайнера спросить, каким сайтом он вдохновился. Когда-то давно мне попадался дизайнерский сайт, с точно такими же линиями. Возможно и он с него идею взял)

Обернуть заголовок ещё раз и для обёртки через те же :after :before добавить линии. на https://www.kizu.ru/ru/ в экспериментах была старая статья про эти линии. Но у меня провайдер не открывает. + на том же codepen масса вариантов.

Может с clear путаете? Или в статье спутали. Наверно, древняя? http://htmlbook.ru/css/clear

Надо не знать, надо пользоваться 🙂

Я про Фотошоп) В последних версиях есть возможность копирования css. Очень помогает "вытащить" тени, те же размеры шрифтов, line-height и т.п. Перетаскивания шрифта никак не затронут его размеры. А про 400 и визуально, первый раз вижу) Больше похоже на "особенность" самого шрифта, что он так выглядит. Но и не отрицаю, что такое возможно)

Выводить картинку через api, а не конструктором. Тогда можно будет задать координаты центровки.

+ в Фотошопе можно прямо css же скопировать. Чтобы сверить.

Тогда не было не безопасных шрифтов 😄

Ну или png наложить можно попробовать 🙂 если цвет всегда будет белым)

В ДевТулз надо смотреть, а не видео записывать) Возможно картинка не тянется. Позишины где нибудь не стоят. Высота как нибудь не так задана.

Выше обсуждали. Но да, ЯБ по прежнему ругается. Я забил)

Да без разницы на самом деле, чем и как сбрасывать. Главное понимать, к чему это приведёт.

Хватит использовать инструменты 2011 года 🙂 мне так кажется)

Поищите на codepen. Например, https://codepen.io/BrentWMiller/pen/XKGyBb

DevTools то на что ругается? Обычно же на отсутствие шрифта. ну или svg, теперь.

Например, первая иконка <svg id="icon-user" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"> <title>user</title> <path d="M15.782 0.381c-4.405 0-8 3.595-8 8s3.595 8 8 8 8-3.595 8-8c0-4.405-3.595-8-8-8zM15.782 2.667c3.17 0 5.714 2.545 5.714 5.714s-2.545 5.714-5.714 5.714c-3.169 0-5.714-2.545-5.714-5.714s2.545-5.714 5.714-5.714z"></path> <path d="M16 18.667c-8.515 0-15.619 5.867-15.619 13.333h2.286c0-5.999 5.858-11.048 13.333-11.048s13.333 5.049 13.333 11.048h2.286c0-7.466-7.104-13.333-15.619-13.333z"></path> </svg> её уже любым конвертером в png сохраните. ну или в иллюстраторе, или чем вы пользуетесь.

Дак это спрайт из 3 иконок. Сохраните каждую иконку по отдельности, да сделайте png спрайт какой вам надо.

Я не понимаю, о чём вы пишете. Делайте, как знаете, думаю, ошибкой не будет.

нет. ошибкой не будет.

Вы точно понимаете, что написали?

Лучше смотреть туда, откуда вы это взяли. Ну и судя по коду, ссылки работают с .main Это и по ДевТулзу видно. К блокам никакого обращения нет.

я бы выбрал с JS. Всё отличие в браузерной поддержке и удобстве использования.

Поможет. Обычно так и делают. Или просто фоновым изображением делают. Главное, чтобы это был отдельный элемент.

Можно и так https://jsfiddle.net/npofopr/wsvpd35z/3/