asked on

can't display bootstrap glyphs in select menu

Hello,

Please review this page
https://www.thinkinsure.ca/index-test.php

under the banners I have a section titled
An Ontario Insurance Broker That Helps You Save

It has a jump menu "compare insurance quotes"

It is supposed to have a bootstrap glyphicon, but it won't display in the select menu, but at bottom of paragraph it will

<div class="site_quick_jump_container pull-right ">
  <form id="jump" method="get" target="_self" >
  <select id="url">
  <option value="">Compare Insurance Quotes  <span class="glyphicon glyphicon-arrow-down"></span></option>
  <option value="https://www.think-dev.ca/car-insurance/">Car Insurance Quote</option>
  <option value="https://www.think-dev.ca/home-insurance/">Home Insurance Quote</option>
  <option value="https://www.think-dev.ca/travel-insurance/">Travel Insurance Quote</option>
  
   <option value="https://www.think-dev.ca/life-insurance/">Life Insurance Quote</option>
    <option value="https://www.think-dev.ca/business-insurance/">Business Insurance Quote</option>
     <option value="https://www.think-dev.ca/group-insurance/">Group Insurance Quote</option>
  </select>
  </form>
</div>

Open in new window

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

lenamtl

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Julian Hansen

@lenamtl,

That is not an HTML convention it is part of the Bootstrap Select plugin I linked to in this post

You can read about the data-content attribute for Bootstrap Select here

lenamtl

I'm using

data-content

Open in new window

instead of

data-icon

Open in new window

because this is more flexible, usually when using icon we also want to use other style with the icon.

Also I do use fontawesome icons instead of glyphs (glyphs with no longer be a part of the next Bootstrap package) and fontawesome have lot a more icons.
https://v4-alpha.getbootstrap.com/migration/#components