font-awesome Archives

[Solved] Add font-awesome icon to option in select [duplicate]

November 6, 2022 by Kirat

Since font-awesome icons are fonts, they can be added to options by Unicode: <script src=”https://unpkg.com/angular/angular.js”></script> <link rel=”stylesheet” href=”https://unpkg.com/font-awesome/css/font-awesome.css”> <body ng-app> <i class=”fa fa-camera-retro”></i> fa-camera-retro<br> <select ng-model=”choice” class=”fa”> <option value=””>Choose</option> <option value=” camera”> camera</option> <option value=” bell”> bell</option> <option value=” bicycle”> bicycle</option> </select> <br> Choice = <span class=”fa”>{{choice}}</span> <br><span class=”fa”>--</span> </body> The DEMO on PLNKR The … Read more

[Solved] How to create checkbox looks like font-awesome glyphicon

September 13, 2022 by Kirat

You can do achieve this even without Javascript. #checkbox{ background:#2f8cab; display:inline-block; padding:15px 18px; border-radius:2px; position:relative; cursor:pointer; } #checkbox-element{ display:block; position:absolute; left:0; top:0; width:100%; height:100%; z-index:99999; opacity:0; } #checkbox>input[type=”checkbox”]+i{ color:rgba(255,255,255,0.2); // color 1 } #checkbox>input[type=”checkbox”]:checked+i{ color:#fff; //color 2 } And here’s the markup, <span id=”checkbox”> <input id=”checkbox-element” type=”checkbox”/> <i class=”glyphicon glyphicon-check”></i> </span> Have a look at … Read more