3

I have several icons in the header that is used from a font and wrapped with

<li style="margin-top: 15px">
    <span class="myIcons" id="messages" style="font-size: 5px">m</span>
</li>

I want to use it to trigger bootstrap dropdown however in its documentation, it uses button and div and, I couldn't figure out how to trigger it when clicked on the font.

Should I try using jquery and try to trigger the dropdown to open on click on #messages?

1 Answer 1

4

You do not have to use <button>'s and <div>'s - the important thing is to have a data-toggle="dropdown" on the triggering element :

<ul class="dropdown">  

  <!-- your markup -->  
  <li style="margin-top: 15px" data-toggle="dropdown">
      <span class="myIcons" id="messages" style="font-size:5px">m</span>
  </li>
  <!--// your markup -->      

  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</ul>

demo -> http://jsfiddle.net/7ujpzs58/

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.