एचटीएमएल में बूटस्ट्रैप 3 ग्लाइफिकॉन का उपयोग कैसे करें

Question

मुझे उपयोगकर्ता द्वारा मेरे यूई में बूटस्ट्रैप 3 ग्लाइफिकॉन का एक सबसेट बनाने की आवश्यकता है।

मैंने कोशिश की यह:

<select class="form-control"> 
    <option><span class="glyphicon glyphicon-cutlery"></span></option> 
    <option><span class="glyphicon glyphicon-eye-open"></span></option> 
    <option><span class="glyphicon glyphicon-heart-empty"></span></option> 
    <option><span class="glyphicon glyphicon-leaf"></span></option> 
    <option><span class="glyphicon glyphicon-music"></span></option> 
    <option><span class="glyphicon glyphicon-send"></span></option> 
    <option><span class="glyphicon glyphicon-star"></span></option> 
</select> 

हालांकि सभी मैं खाली लाइनें हैं। किसी भी मदद या वैकल्पिक सुझाव की सराहना की।

Answer 1

मुझे नहीं लगता कि मानक HTML चयन HTML सामग्री प्रदर्शित करेगा। मैं बूटस्ट्रैप का चयन करने का सुझाव दूंगा: http://silviomoreto.github.io/bootstrap-select/

इसमें चयन में आइकन या अन्य HTML मार्कअप प्रदर्शित करने के कई विकल्प हैं। https://www.codeply.com/go/l6ClKGBmLS

Answer 2

मैं बूटस्ट्रैप 3 ड्रॉप-डाउन बटन का उपयोग कर समाप्त हो गया है, मैं इस मामले में यहां मेरे समाधान पोस्टिंग कर रहा हूँ यह भविष्य में किसी को मदद करता है:

<select id="mySelect" data-show-icon="true"> 
    <option data-content="<i class='glyphicon glyphicon-cutlery'></i>">-</option> 
    <option data-subtext="<i class='glyphicon glyphicon-eye-open'></i>"></option> 
    <option data-subtext="<i class='glyphicon glyphicon-heart-empty'></i>"></option> 
    <option data-subtext="<i class='glyphicon glyphicon-leaf'></i>"></option> 
    <option data-subtext="<i class='glyphicon glyphicon-music'></i>"></option> 
    <option data-subtext="<i class='glyphicon glyphicon-send'></i>"></option> 
    <option data-subtext="<i class='glyphicon glyphicon-star'></i>"></option> 
</select> 

यहाँ एक डेमो है। उल के लिए कक्षा में बूटस्ट्रैप 3 सूची-इनलाइन जोड़ना इसे अच्छी तरह से कॉम्पैक्ट प्रारूप में प्रदर्शित करने का कारण बनता है।

<div class="btn-group"> 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
     Select icon <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu list-inline" role="menu"> 
     <li><span class="glyphicon glyphicon-cutlery"></span></li> 
     <li><span class="glyphicon glyphicon-fire"></span></li> 
     <li><span class="glyphicon glyphicon-glass"></span></li> 
     <li><span class="glyphicon glyphicon-heart"></span></li>   
    </ul> 
</div> 

मैं Angular.js उपयोग कर रहा हूँ तो यह वास्तविक कोड मैं प्रयोग किया जाता है:

<div class="btn-group"> 
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
       Avatar <span class="caret"></span> 
      </button> 
      <ul class="dropdown-menu list-inline" role="menu"> 
       <li ng-repeat="avatar in avatars" ng-click="avatarSelected(avatar)"> 
        <span ng-class="getAvatar(avatar)"></span> 
       </li> 
      </ul> 
     </div> 

और मेरे नियंत्रक में:

$scope.avatars=['cutlery','eye-open','flag','flash','glass','fire','hand-right','heart','heart-empty','leaf','music','send','star','star-empty','tint','tower','tree-conifer','tree-deciduous','usd','user','wrench','time','road','cloud']; 

$scope.getAvatar=function(avatar){ 
    return 'glyphicon glyphicon-'+avatar; 
}; 

Answer 3

मेरी जानकारी के लिए एक ही रास्ता प्राप्त करने के लिए यह देशी चयन में फ़ॉन्ट के यूनिकोड प्रस्तुतियों का उपयोग करना होगा। आपको ग्लाइफ़िकॉन फ़ॉन्ट को चुनने के लिए आवेदन करना होगा और इस तरह इसे अन्य फ़ॉन्ट्स के साथ मिश्रित नहीं किया जा सकता है। हालांकि, ग्लाइफिकॉन में नियमित वर्ण शामिल होते हैं, ताकि आप टेक्स्ट जोड़ सकें। दुर्भाग्यवश व्यक्तिगत विकल्पों के लिए फ़ॉन्ट सेट करना संभव नहीं लगता है।

<select class="form-control glyphicon"> 
    <option value="">&#x2212; &#x2212; &#x2212; Hello</option> 
    <option value="glyphicon-list-alt">&#xe032; Text</option> 
</select> 

यहाँ उनके यूनिकोड के साथ माउस की एक सूची है:

http://glyphicons.bootstrapcheatsheets.com/