Drupal 7 - l（）与bootstrap glyphicon一起使用会导致双倍间距

Question

请参阅附图。我不确定为什么在为使用l（）创建的链接添加glyphicon时获得此双倍间距。如果我删除了字形，则文本是单行间隔的。

这是我生成菜单的代码

"<div class='btn-group dropup btn-full-width'>
        <button type='button' class='btn " . $managed . " btn-xs btn-full-width'>Manage</button>
        <button type='button' class='btn " . $managed . " dropdown-toggle btn-xs' data-toggle='dropdown'>
          <span class='caret'></span>
          <span class='sr-only'>Toggle Dropdown</span>
        </button>
        <ul class='dropdown-menu custom-blue' role='menu'>
          <li>" . l(' View Progress','observations/view_child/'.$row->child_id,array('attributes'=>array('class'=>array('btn', 'custom-blue','glyphicon', 'glyphicon-tasks', 'pull-left')))) . "</li>
          <li>" . l(' EYFS Profile / Learning Journey entry','observations/select_observation_type/' . $row->child_id,array('attributes'=>array('class'=>array('custom-blue','glyphicon','glyphicon-th-large')))) . "</li>
          <li>" . l(' Reports','observations/reports/' . $row->child_id,array('attributes'=>array('class'=>array('btn', 'custom-blue','glyphicon', 'glyphicon-print','pull-left')))) . "</li>
          <li>" . l(' Notebooks','observations/add_child_note/' . $row->child_id,array('attributes'=>array('class'=>array('btn', 'custom-blue','glyphicon', 'glyphicon-list-alt','pull-left')))). "</li>

          <li>" . l(' Next Steps','observations/view_next_steps/' . $row->child_id . '/0/0/',array('attributes'=>array('class'=>array('btn', 'custom-blue','glyphicon', 'glyphicon-random','pull-left')))) . "</li>
          <li>" . l(' Flags','observations/view_flagged_observations/' . $row->child_id,array('attributes'=>array('class'=>array('btn', 'custom-blue','glyphicon', 'glyphicon-flag','pull-left')))) . "</li>

          <li>" . l(' Edit Child Record','observations/edit_child/' . $row->child_id,array('attributes'=>array('class'=>array('btn', 'custom-blue','glyphicon', 'glyphicon-pencil','pull-left')))) . "</li>
          <li>" . l(' Child Contacts','observations/manage_child_contacts/' . $row->child_id,array('attributes'=>array('class'=>array('btn', 'custom-blue','glyphicon', 'glyphicon-phone-alt','pull-left')))) . "</li>

          <li>" . l(' Attendance Record','observations/attendance_record/' . $row->child_id,array('attributes'=>array('class'=>array('btn', 'custom-blue','glyphicon', 'glyphicon-list-alt','pull-left')))) . "</li>
          <li>" . l(' Attended Today','observations/mark_attended_today/' . $row->child_id,array('attributes'=>array('class'=>array('btn', 'custom-blue','glyphicon', 'glyphicon-ok','pull-left'), 'onclick'=>'if(!confirm("Register ' . $row->first_name . ' as attending today?")){return false;}'))) . "</li>
          <li>" . $backup_link . "</li>
        </ul>
      </div>
      </li>

    ";
}
$html .= "</ul>";

Answer 1

如果字体大小不同，您可能需要应用不同的字间距，如果您不提前计划，可能会使样式表代码更加复杂。

我添加了这个（sass-scss）：

.glyphicon {
    word-spacing: -0.5em;

    &:before {
        padding-right: 0.5em;
    }
}

在常规css中，这看起来像这样（未经过测试，但它的含义相同）：

.glyphicon {
        word-spacing: -0.5em;
}

.glyphicon:before {
        padding-right: 0.5em;
}

查看CSS MDN Reference for "word-spacing."我还必须添加＆＃34; position：relative;底部：3px;＆＃34;在之前，因为我的链接是内联的。我知道你不需要那些信息，但是其他人可能会偶然发现并且这个花絮可能会节省一些时间。