This is a migrated thread and some comments may be shown as answers.

Mobile - font awesome

3 Answers 15 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Saop
Top achievements
Rank 1
Saop asked on 12 Sep 2016, 10:38 AM

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

Sort by
0
Bozhidar
Telerik team
answered on 13 Sep 2016, 10:03 AM
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:

<!doctype html>
<html>
 
<head>
    <style>
        body {
            font-size: 14px;
            font-family: Arial, ​Helvetica, ​sans-serif;
        }
    </style>
 
    </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
Saop
Top achievements
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:link1link2, ...

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
Bozhidar
Telerik team
answered on 14 Sep 2016, 08:36 AM
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 as 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.
 
Tags
General Discussions
Asked by
Saop
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Saop
Top achievements
Rank 1
Share this question
or