How can I use font-awesome in mobile application? I found link for custom icons, but I don't want to rewrite all content css property. I just want to use data-icon="fa fa-home" for example.
.km-arrow-e:after,.km-arrow-e:before{ content: "\e000";}3 Answers, 1 is accepted
0
Hello,
I checked FA website, and I do not see an option to use something like data-icon to add an icon inside some element.
You should usee CSS classes instead. I tried with Kendo Slider and it works with the following:
The first marked yellow code, includes FA resources using CDN. The second yellow marked code adds a specific CSS class to Slider element.
Regards,
Bozhidar
Telerik by Progress
I checked FA website, and I do not see an option to use something like data-icon to add an icon inside some element.
You should usee CSS classes instead. I tried with Kendo Slider and it works with the following:
<!doctype html><html><head> <style> body { font-size: 14px; font-family: Arial, Helvetica, sans-serif; } </style> <script src=" https://use.fontawesome.com/20abba18c7.js "> </script></head><body> <input id="slider" value="10" /> <button glyph=""></button> <script> $(document).ready(function() { var slider = $("#slider").kendoSlider({}).data("kendoSlider"); }); </script> <script> $(document).ready(function() { $('.k-icon').addClass('fa fa-blind').removeClass('k-icon'); }); </script></body></html>The first marked yellow code, includes FA resources using CDN. The second yellow marked code adds a specific CSS class to Slider element.
Regards,
Bozhidar
Telerik by Progress
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
0
Seyfor
Top achievements
Rank 1
Rank 1
answered on 14 Sep 2016, 05:41 AM
I was looking for html solution. It would be great if I could use data-icon:
<div data-role="tabstrip"> <a href="#index" data-icon="fa fa-home">Home</a></div>or maybe something like that:
<div data-role="tabstrip"> <a href="#index" data-sprite-css-class="fa fa-home">Home</a></div>Kendo users already have second options in most non-mobile widgets:link1, link2, ...
Problem is kendo mobile automatically adds "km-" prefix. I need this really bad, I can code this one myself (adding support for data-sprite-css-class). It would be a really good start if you could point me to file & line number where data-icon is processed.
0
Hi,
Actually I do not exactly understand your scenario. In the provided links, the icons are added as CSS classes, but not as HTML attributes such a
You could see that in the HTML is used data-icon attribute:
Then with jQuery I get the data-icon attr value and add it to a CSS class in order to make FA to work properly.
Regards,
Bozhidar
Telerik by Progress
Actually I do not exactly understand your scenario. In the provided links, the icons are added as CSS classes, but not as HTML attributes such a
s data-icon="fa fa-icon".
What I understand is that you want to load the FA resources and to use data-icon property to add icons instead using a CSS class. However, FA does not provide such functionality. In that case, you could use something as the following dojo example: http://dojo.telerik.com/@ruzhenov/IlaNe.You could see that in the HTML is used data-icon attribute:
<a href="#index" data-icon="fa fa-folder-open">Folder</a> <a href="#index" data-icon="fa fa-glass">Glass</a> <a href="#index" data-icon="fa fa-globe">Globe</a>Then with jQuery I get the data-icon attr value and add it to a CSS class in order to make FA to work properly.
Regards,
Bozhidar
Telerik by Progress
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.