CODEWITHSUNDEEP
jquerytwitter-bootstrapfont-awesome
ambe5960
ambe5960

Reputation: 1990

Append icon to button text with jquery

So I have a little drop down menu that comes out of a button as posted below. I have included a font-awesome icon with each list option. I have used jquery to change the text of the button(and the color) based on the selection, but I cannot seem to figure out how to add the icon of the associated list item to the button text, which would look really good with what I am trying to do. Should I include the icon as a data attribute?

Here is my HMTL:

<div class="btn-group  col-sm-offset-1 col-sm-11">
       <a id="post-type-select-button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" data-target="#">Select a type of post &nbsp; <span class="caret"></span></a>
             <ul id="post-type-menu" class="dropdown-menu" style="margin-left: 16px;">
                    <li data-color="#FFFFAA" class="alert-li" id="A"><a tabindex="-1" href="#" align="left">Alert<i  class="fa fa-warning pull-right" style="margin-top:3px"></i></a></li>
                    <li data-color="#99D699" class="report-li" id="RP"><a tabindex="-1" href="#" align="left">Report<i  class="fa fa-file-text pull-right" style="margin-top:3px"></i></a></li>
                    <li data-color="#C8ECFF" class="review-li" id="RV"><a tabindex="-1" href="#" align="left">Review<i  class="fa fa-star-half-empty  pull-right" style="margin-top:3px"></i></a></li>
                    <li data-color="#FF9494" class="question-li" id="Q"><a tabindex="-1" href="#" align="left">Question<i  class="fa fa-question  pull-right" style="margin-top:3px"></i></a></li>
            </ul>
      </div>

Here is my jquery:

$("#post-type-menu li").click(function () {
                $("#post-type-select-button:first-child").text($(this).text());
                $("#post-type-select-button").css("background-color",$(this).data("color")); 
                $("#post-type-select-button").css("color","#555555");                    
            });

Sincere thanks for any help!

Upvotes: 0

Views: 1700

Answers (1)

meskobalazs
meskobalazs

Reputation: 16041

Use the $('#post-type-select-button i') selector, and change its class to whatever you want to. E.g.

 $('#post-type-select-button i').attr('class', 'fa fa-info');

Upvotes: 1

Related Questions