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 to get all selected values of a multiple select box?
- How to programatically select an HTML option using JavaScript?
- Change <select>'s option and trigger events with JavaScript
- Print the unique column values from two 2d arrays as <option> tags and declare the "selected" attribute on intersecting values
- How can I set the default value for an HTML <select> element?
- Category dropdown filter in ASP.NET Core 9 MVC
- How to add padding to the arrow present in html select?
- How to add padding to the default arrow in a select dropdown menu?
- How do I clear all options in a dropdown box?
- Print option tags with optgroup tags from a sorted 2d array
- React option selected property doesn't work
- How to select a drop-down menu value with Selenium using Python?
- Set selected option of select box
- getting current <select> value from drop-down menu with Python Selenium
- Blazor select dropdown set active value by code
- How to dynamically retrieve the content text of a HTML tag and its child tags?
- Is it possible to use JS to open an HTML select to show its option list?
- Django: Html select with onchange action (without using form) and pure Javascript: redirect with code 200 but page not loaded
- Looking for an example of how to use `element_selection_state_to_be()` in Selenium
- Height of an HTML select box (dropdown)
- MouseUp() event on html select not working
- Submit more than one value from a single selected option
- How do you limit the number of options selected in an HTML <select> element?
- Change the selected value of a drop-down list with jQuery
- Joomla JForm Chained Select with Foreign Key, Ajax and jQuery
- Bootstrap searchable select option
- How do I make a placeholder for a 'select' box?
- How to change options of <select> with jQuery?
- 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?