使用 Glyphicon 作为 LI 要点(引导程序 3) [英] Using a Glyphicon as an LI bullet point (Bootstrap 3)

问题描述

如何更改 HTML 列表中的项目符号并使用 Bootstrap 3 附带的字形?

所以:

<li>...</li><li>...</li>

显示为:

 [icon] Facere possimus, omnis voluptas hatnda est, numquam eius modi万能的厌烦排斥.Non numquam eius modi numam dolor omnistempora incidunt ut laboure.[icon] Facere possimus, omnis voluptas hatnda est, numquam eius modi万能的厌烦排斥.Non numquam eius modi numam dolor omnistempora incidunt ut laboure.

我希望不必须像这样注入额外的 HTML...

<li><i class="glyphicon glyphicon-chevron-right"></i>...</li><li><i class="glyphicon glyphicon-chevron-right"></i>...</li>

解决方案

使用一点 CSS 并不太难，而且 比使用图像作为项目符号要好得多，因为您可以缩放它并为它着色，它会在所有分辨率下保持清晰.

1. 通过打开

   How can I change the bullet points in an HTML list and use the glyphicons that come with Bootstrap 3?

   So that:

   <ul>
       <li>...</li>
       <li>...</li>
   </ul>
   

   Displays as:

    [icon]  Facere possimus, omnis voluptas assumenda est, numquam eius modi
            omnis dolor repellendus. Non numquam eius modi numam dolor omnis 
            tempora incidunt ut labore.
   
    [icon]  Facere possimus, omnis voluptas assumenda est, numquam eius modi
            omnis dolor repellendus. Non numquam eius modi numam dolor omnis 
            tempora incidunt ut labore.
   

   I would prefer not to have to inject extra HTML such as this...

   <ul>
       <li><i class="glyphicon glyphicon-chevron-right"></i> ...</li>
       <li><i class="glyphicon glyphicon-chevron-right"></i> ...</li>
   </ul>
   

   解决方案

   This isn't too difficult with a little CSS, and is much better than using an image for the bullet since you can scale it and colour it and it will keep sharp at all resolutions.

   1. Find the character code of the glyphicon by opening the Bootstrap docs and inspecting the character you want to use.

   2. Use that character code in the following CSS

      li {
          display: block;
      }
      
      li:before {
          /*Using a Bootstrap glyphicon as the bullet point*/
          content: "\e080";
          font-family: 'Glyphicons Halflings';
          font-size: 9px;
          float: left;
          margin-top: 4px;
          margin-left: -17px;
          color: #CCCCCC;
      }
      

      You may like to tweak the colour and margins to suit your font size and taste.

   View Demo & Code

   这篇关于使用 Glyphicon 作为 LI 要点(引导程序 3)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！