如何控制图标和文本Materialize之间的空间

Question

  <ul id="slide-out" class="side-nav fixed" >
      <div class="logo"><a href="#" class="brand-logo"><%= image_tag "logo.png", height:"auto",width:"120" %></a></div>
      <ul class="collapsible" data-collapsible="accordion">
        <li>
          <div class="collapsible-header" style="font-size: 15px"><i class="material-icons" style="font-size: 20px">send</i><span>Main</span></div>
          <div class="collapsible-body" style="background:blue" style="font-size: 15px">
            <ul>
            <a href=""> <li><<i class="material-icons" style="font-size: 20px">send</i> Message</a> </li>
            <a href=""><li><i class="material-icons" style="font-size: 20px">send</i> Scheduler</a> </li>
            </ul>
          </div>
        </ul>
    <ul>

  

Answer 1

快速破解可以添加一些不间断的空格 ，但我不推荐它。 否则，您可以在css文件中查找该特定类并修改填充。

Answer 2

您可以在图标周围使用<span>标签，并使用style属性填充。

<a href=""> <li><span style="padding-right: 5px"><i class="material-icons" style="font-size: 20px">send</i></span> Message</a> </li>