如何减少MDI图标的粗细

Question

我目前正在一个项目中，当我在移动设备上查看时，我需要减小mdi-close图标的字体粗细。由于某种原因，我无法使其正常工作。我已经尝试过#closeIcon {font-weight：100; }却什么也没做。 （如果重要的话，我也在使用Bootstrap 4） 这是代码：

#closeIcon {
    font-size: 200%;
    font-weight: 100;
    margin-left: 4%;
    left: 5px;
}

<li class="sidebar-top-xs nav-xs">
 <a class="sidebar-link waves-effect waves-dark" aria-expanded="false">
  <i id="closeIcon" class="mdi mdi-close"></i>
   <span class="hide-menu move-text nav-text-xs">Navigation</span>
 </a>
</li>

预先感谢您的帮助