Mobile - font awesome

4 posts, 0 answers
  1. Matjaž
    Matjaž avatar
    81 posts
    Member since:
    Jul 2015

    Posted 12 Sep Link to this post

    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";
    }

  2. Bozhidar
    Admin
    Bozhidar avatar
    678 posts

    Posted 13 Sep Link to this post

    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.
     
  3. Kendo UI is VS 2017 Ready
  4. Matjaž
    Matjaž avatar
    81 posts
    Member since:
    Jul 2015

    Posted 14 Sep in reply to Bozhidar Link to this post

    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.

  5. Bozhidar
    Admin
    Bozhidar avatar
    678 posts

    Posted 14 Sep Link to this post

    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.
     
Back to Top
Kendo UI is VS 2017 Ready