Особый стиль - материальные иконы

Я хочу создать такой особый стиль:

Особый стиль - материальные иконы

с использованием HTML и стиля иконок материалов materialize.css.

Я придумал этот html-код:

* {
  font-family: sans-serif;
  color: blue;
}
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">


<p style = "font-size: 6.5vh">
  O
  <i style = "font-size: 3.8vh;" class = "material-icons">bug_report</i>
  <i style = "font-size: 3.8vh;" class = "material-icons">bug_report</i>
  <span style = "">ps!</span>
</p>

У меня возникли проблемы, потому что "значки ошибок" не выровнены по нижней части шрифта (попробуйте сделать их больше - вы увидите). Другая проблема заключается в том, что пространство между текстом и значками слишком велико.

Я попытался добавить "margin-left: -4%" к значкам, которые работают на мобильных устройствах, но на моем рабочем столе это выглядит так:

Особый стиль - материальные иконы

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
1 495
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Что касается проблемы с пробелом между символами, есть несколько способов решить эту проблему (подробности см. В здесь). Основная проблема здесь в том, что каждый перенос строки интерпретируется как пробел. Простое решение - просто не использовать разрывы строк и писать HTML в одной строке.

Для вашей второй проблемы с выравниванием значков в тексте вы можете взглянуть на здесь. В нашем примере position: relative; top: 4px; должен выполнить эту работу.

* {
  font-family: sans-serif;
  color: blue;
}
.material-icons {
  font-size: 3.8vh;
  position: relative;
  top: 4px;
}
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">


<p style = "font-size: 6.5vh">
  O<i class = "material-icons">bug_report</i><i class = "material-icons">bug_report</i><span>ps!</span>
</p>

вы можете установить размер шрифта с помощью js.

примечание: наверное есть более удобные css решения.

var p_oops=document.getElementById('p_oops')
var bug_reports=document.getElementsByClassName('bug_report')

var main_ratio=.05;
var i_ratio=.6;
function SetFontSize(){
p_oops.style.fontSize=window.innerWidth*main_ratio+'px';

 for(var i=0, len=bug_reports.length; i<len; i++)
    {
bug_reports[i].style.fontSize=window.innerWidth*main_ratio*i_ratio+'px';
    }

}
SetFontSize();
window.onresize=function(){
   SetFontSize();
}
* {
  font-family: sans-serif;
  color: blue;
}
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">


<p id = "p_oops">
  O
  <i  style = "font-size: 3.8vh;" class = "material-icons bug_report">bug_report</i>
  <i style = "font-size: 3.8vh;" class = "material-icons bug_report">bug_report</i>
  <span style = "">ps!</span>
</p>

Вы можете исправить это с помощью inline-flex

p{
    display: inline-flex;
    align-items: flex-end;
    line-height: 1;
}

вы также можете попробовать align-items: baseline;

* {
  font-family: sans-serif;
  color: blue;
}
p{
    display: inline-flex;
    align-items: flex-end;
    line-height: 1;
}
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">


<p style = "font-size: 6.5vh">
  O
  <i style = "font-size: 3.8vh;" class = "material-icons">bug_report</i>
  <i style = "font-size: 3.8vh;" class = "material-icons">bug_report</i>
  <span style = "">ps!</span>
</p>

Другие вопросы по теме