title: Adjusting space between multiple icons or text in Bootstrap dropdown list item
body: <p>I'm using a css class to allow me to put an 'add' link and an 'edit' link side-by-side in the same item on a Bootstrap dropdown list.</p>
  
  <pre><code>&lt;li class="multilink"&gt;&lt;a data-toggle="modal" data-target="#.."&gt;&lt;span class="glyphicon glyphicon-plus "&gt;&lt;/span&gt;&lt;/a&gt;&lt;a href ={% url '...' ... %}&gt;&lt;span class="glyphicon glyphicon-edit"&gt;&lt;/span&gt;&amp;nbsp;Collections&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>Edit: the whole menu item</p>
  
  <pre><code>         &lt;li class="dropdown"&gt;
            &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;&lt;span class="glyphicon glyphicon-cog" aria-hidden="true"&gt;&lt;/span&gt;&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu dropdown-menu-right" &gt;
              &lt;li&gt;
                &lt;a data-toggle="modal" data-target="#SectionRosterModal"&gt;Roster
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;!-- Announcments --&gt;
              &lt;li class="multilink"&gt;
                &lt;a data-toggle="modal" data-target="#AnnouncementAddModal"&gt;
                  &lt;span class="glyphicon glyphicon-plus glyphhover pointerhover"&gt;
                  &lt;/span&gt;
                &lt;/a&gt;
                &lt;a href ={% url 'gbook:editlist' to_edit='ann' Course_id=this_course.pk Section_id=active_section.pk %}&gt;
                  &lt;span class="glyphicon glyphicon-edit glyphhover"&gt;
                  &lt;/span&gt;&amp;nbsp;Announcements
                &lt;/a&gt;
              &lt;/li&gt;
              {# &lt;li&gt;&lt;a href ="/gbook/edit-ann/{{this_course.pk}}-{{ active_section.pk }}"&gt;Edit Announcements&lt;/a&gt;&lt;/li&gt; #}
              &lt;!-- Courses --&gt;
              &lt;li class="multilink"&gt;
                &lt;a data-toggle="modal" data-target="#CourseAddModal"&gt;
                  &lt;span class="glyphicon glyphicon-plus glyphhover pointerhover"&gt;
                  &lt;/span&gt;
                &lt;/a&gt;
                &lt;a href={% url 'gbook:doedit' to_edit='cou' pk=this_course.pk Course_id=this_course.pk Section_id=active_section.pk %}&gt;
                  &lt;span class="glyphicon glyphicon-edit glyphhover"&gt;
                  &lt;/span&gt;&amp;nbsp;Course
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;!-- Sections --&gt;
              &lt;li class="multilink"&gt;
                &lt;a data-toggle="modal" data-target="#SectionAddModal"&gt;
                  &lt;span class="glyphicon glyphicon-plus glyphhover pointerhover"&gt;
                  &lt;/span&gt;
                &lt;/a&gt;
                &lt;a href ={% url 'gbook:editlist' to_edit='sec' Course_id=this_course.pk Section_id=active_section.pk %}&gt;
                  &lt;span class="glyphicon glyphicon-edit glyphhover"&gt;
                  &lt;/span&gt;&amp;nbsp;Sections
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;!-- Scollections --&gt;
              &lt;li class="multilink"&gt;
                &lt;a data-toggle="modal" data-target="#ScollectionAddModal"&gt;
                  &lt;span class="glyphicon glyphicon-plus glyphhover pointerhover"&gt; 
                  &lt;/span&gt;
                &lt;/a&gt;
                &lt;a href ={% url 'gbook:editlist' to_edit='sco' Course_id=this_course.pk Section_id=active_section.pk %}&gt;
                  &lt;span class="glyphicon glyphicon-edit glyphhover"&gt;
                  &lt;/span&gt;&amp;nbsp;Scollections
                &lt;/a&gt;
              &lt;/li&gt;
  
  
            &lt;/ul&gt;
          &lt;/li&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.dropdown-menu &gt; li &gt; a:hover {
      background-image: none;
  }
  .open&gt; ul&gt;li.multilink{
      display: inline-flex !important;
  }
  </code></pre>
  
  <p>The item looks like this:
  <a href="https://i.stack.imgur.com/3H1fq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3H1fq.png" alt="enter image description here"></a></p>
  
  <p>What I want is for the two icons to be fairly snug on the LHS, followed by the text (linked to the edit link). Additionally, is there any way to disable the active link color change? I have taken off the <code>background-image</code>, but there's still an associated color change.</p>