наверное паддинг

10px кругом

display: inline-block padding: 10px border: 3px solid $dark-text border-radius: 50%

задай ширину и высоту или падингом от редактируй

У иконок свой фонтсайз

задай ширину и высоту или падингом от редактируй

Как бы ты сделал такие иконки? Просто разметку, без css

На a задавал бы бордер или обернул бы в p?

ul>li если традиционная верстка

хм

Ладно, попробую через них

Что интересно, если в спан завёртываешь иконку — она круглая получается. А если в а — то овальная

нифига не получается

Всё равно овальные, блять

Вот тут ищи https://materialdesignicons.com/ Там поиск получше чем в официальных иконах. И плюс кроме официальных там и других иконок много

Вот тут ищи https://materialdesignicons.com/ Там поиск получше чем в официальных иконах. И плюс кроме официальных там и других иконок много

Там и ищу)

Но проблем-то не в этом)

У меня как-то была такая проблема, я точно не помню как делал. Но кажется просто задавал тегу в котором иконка физический размер, например 48 высота и ширина, бордер радиус 100%, а иконку абсолютным позиционированием по центру выравнивал

&__icon font-size: 22px width: 25px height: 25px color: $dark-text

Но всё равно

Иконке position absolute, а родительскому тегу position relative

Ребят, подскажите сервисы, где можно провести вебинар. Из функций нужна только возможность регистрироваться на него заранее и онлайн трансляция (можно даже без записи). Интересуют или бесплатные варианты или не дорогие. В идеале оплата за один вебинар или за время. Буду дико признателен, если напишите в личные сообщения.

иконка свалит

ну так топ лефт подравняй

Ну так позиционируй ее по центру. Как это обычно делают с дочерним элементом

а вы заметили, что паддинг-то какой?)

Top and left 50%

Мне кажется это костыли ..

и не тру

Должно быть решение

Ну смотри сам, мое дело предложить решение

Можешь тогда ещё одну обертку над картинкой добавить

Но почему же в спане иконка норм себя ведёт, а в а — нифига?

А картинке высота и ширина 100%

Можешь тогда ещё одну обертку над картинкой добавить

Картинка — это ссылка

<li class="social__item"> <a class="social__link" href="#"><i class="mdi mdi-facebook social__icon"></i></a> </li>

Картинка — это ссылка

Иконка точнее, не так сказал

Но почему же в спане иконка норм себя ведёт, а в а — нифига?

Надо код ковырять, а я спать хочу.. пошел спать значит

Иконка точнее, не так сказал

Ну да. Иконка — ссылка. При ховере на неё она делается синим и бордер тоже

Решил проблему. Навесил паддинг и бордер не не ссылку, а на иконку))

теперь самое сложное — инпут

в велью кладёшь UTF-код значка?

сделай пвседоэлементом

сделай пвседоэлементом

Тогда это не будет сабмит

Сделал так <button class="mdi mdi-email"></button>

неплохо)

почему не будет сабмит?

сделай пвседоэлементом

Какой псевдоэлемент можно сделать сабмитом?

ну кнопка у тебя сабмит же ?

в цсс сделай

Как кнопку сделать псевдоэлементом?)

button::after { иконка }

да не кнопку , кнопку оставь как есть а иконку кинь на пвседоэлемент

Да не нужно) Я сам баттон засуну в инпут)

ну как хоч но вроде как не сложно то что я предлагаю

Ты предлагаешь ещё афте на баттон навесить. Зачем? А сам баттон дисплейнон?)

так стоп

какова задача ?

отобразить иконку на баттоне ?

Отобразить баттон в виде иконки)

http://img.netpeak.ua/maestro/2017-04-08_bd062d.png

как варик

но зачем плодить сущности сверх необходимости?)

Псевдоэлемент будет обладать свойством сабмит? Нет.

баттон — да

Всё просто <button class="mdi mdi-email input__submit"></button>

так ему и не нужно обладать свойством сабит)

сабмит сабмитом

а пвседоэлементом ты просто показываешь иконку

и убираешь бордеры и колор транспарент

Нужно, чтобы при нажатии на иконку отправлялись данные

пвседоэлемент помешает?)

иконка — это и есть баттон

как ты на псевдоэлемент повесишь type="submit"?

Я может мало понимаю, но считаю, что мыслю логически)

Если не прав, то переубеди меня)

пвседоэлемент !== баттон

баттон остается баттоном а пвседоэлементом ты накладываешь сверху карртинку на баттон

иконку через валью вставил?

Осталось верикальную полосочку заделать

нет, я ж писал

Через классы <button class="mdi mdi-email input__submit"></button>

Ну да)

это из фотошопа?