特殊样式-材料图标

Question

我想要创建一种特殊的样式，

使用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％”添加到图标上，该图标适用于移动设备，但在我的桌面上看起来像这样：

Answer 1

关于字符之间的间距问题，有几种解决方法（有关详细信息，请参见here）。您的主要问题是每个换行符都被解释为空格。一个简单的解决方案是不使用任何换行符，而是在一行中编写HTML。

关于文本中图标对齐的第二个问题，您可以查看here。对于我们的示例，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>

Answer 2

您可以通过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>

Answer 3

您可以使用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>