How to apply default webix font style to a html div tag?
Hey @webix_B_123, Webix UI is actually using a freely available font called Roboto, you can get it here - https://fonts.google.com/specimen/Roboto (but since you are already using Webix, it is included in the codebase, so you don’t need download and/or link it). Here are the default font settings you can get from the webix.css file:
font-family: Roboto, sans-serif;
font-size: 14px;
font-weight: 400;
color: #475466;
letter-spacing: 0.2px;
The scenario is:
I have span tag along with font-awesome icon as list item. So the like below.
“</div class=“webix_scroll_cont”>/
</a webix_l_id=“asc_id” class=“webix_list_item fa fa-sort-alpha-asc”
style=“width:auto; height:34px; overflow:hidden;” role=“menuitem”
tabindex=“0”>/
</span class=“colHeaderItems”>/Ascending<//span>/
<//a>/
<//div…>/”
here span is getting font-family from “fa”. how can I inherit from “webix_list_item”.
I hope font-family will change on change of webix theme
As far as I can see your text is wrapped inside a span with your icon </span class="colHeaderItems">Ascending</span>, all you need to do is move your text outside the span for it to inherit from the webix main font: </span class="colHeaderItems"></span>Ascending, here’s an example https://snippet.webix.com/be12a2av. The default webix font will get applied to every element inside webix.ui unless it gets overwritten by another rule, as it is with your case.
So in your example you’re applying icon css
$css: 'webix_icon mdi mdi-access-point
to the whole menu item, and you’re also storing css inside your value,
value: '<span class="colHeaderItems">Ascending</span>'
which is sub-optimal. You can achieve the same results with the use of template, which is the recommended way to do this: https://snippet.webix.com/ht9rbhxx. Please note that I’ve also wrapped the menu item inside a div to align it vertically and horizonally.