How to avoid ligatures within option-tag?
I'd like to create a visually appealing select-dialog that shows FontAwesome-Icons and a word describing the symbol to select from various scales for statistical data.
So I'm using the FontAwesome-Fonts for the select-tag and the unicode-glyphs for the various symbols. That first part works nicely.
But the words I am using are also used in FonAwesome to form ligatures that can also be used to get the icons (I thought this was limited to the desktop-version, but as my example prooves, it also happens on the web). The FA-Site states that they are "...aren't comfortable considering ligatures for Web Fonts + CSS".
Please check out my fiddle here or the screenshot:
So, my questions are:
if it's not supposed to happen with Webfonts/CSS - is there anything that I am doing wrong using them? (Of course I have the desktop-fonts installed on my machine, I guess we won't know if users of the website will have them or not)
is there any way I can avoid the ligatures taking effect within the
option-tag? (as you see in the sample, I am already usingfont-variant-ligatures: none;in the CSS)
I found a way to solve this by defining dedicated @font-faces with a different name. (My theory is that Chrome uses the local font I have installed and that it's ligatures override everything I do in CSS). That "special font-face" is sure not to be found locally...
If someone finds a better explanation or fix, I'll happily accept it.
- How do I make a placeholder for a 'select' box?
- How to change options of <select> with jQuery?
- How to programatically select an HTML option using JavaScript?
- How to expand 'select' option width after the user wants to select an option?
- How do you get the currently selected <option> in a <select> via JavaScript?
- Get all <option> text values from an HTML document
- HTML element showing incorrect index when double clicked in Chrome
- Remove "Choose an option" from variable product dropdowns in Woocommerce 3
- How to populate the options of a select element in javascript
- Add a checkbox on single product pages that adds an additional cost in Woocommerce
- How to set selected select option in Handlebars template
- Assign value to select in Laravel Collectives
- How to get all selected values of a multiple select box?
- How do I interpret space characters in a text input as underscores when filtering options in a datalist?
- How to show disabled HTML select option by default?
- Making a <select> show as a scrollable list with only one selection?
- Selected item in SelectList not being displayed in view drop-down
- Can we add class attribute in option element?
- Change select box option background color
- Is it possible to use JS to open an HTML select to show its option list?
- Multiple select option into a PHP array
- HTML Form: Select-Option vs Datalist-Option
- How to remove the default arrow icon from a dropdown list (select element)?
- How can I set the default value for an HTML <select> element?
- jinja2 if else in select tag
- Editable 'Select' element
- How to select a drop-down menu value with Selenium using Python?
- How to only select one value in an option that contains two variables?
- Javascript selecbox.options to array?
- How can I add an option in the beginning?