Please explain data-icon to me

Website, docs & demos
1

I’d like to understand how to use the icons properly. On the icons page (https://docs.mobiscroll.com/icons) I see this example:

Then use the Font Awesome 5 icons like this:
<button data-icon="empty icon far fa-user-circle">Camera</button>

So I see that fa-user-circle is the name of the icon, but what is “empty icon far” for?

And on this page : https://demo.mobiscroll.com/jquery/navigation/tab-icons#theme=ios

I see this example

<li data-tab="md-tab-iphone" data-icon="empty micons icon-iphone_6" data-selected="true">iPhone 6</li>

Here I don’t see “empty icon far”, but instead I see “empty micons”. What’s the difference and how do I know when to use which one?

2

Hi Vincent,

The data-icon attribute’s value will be added to the specific component as class attribute. The component will prefix it with the mbsc-ic mbsc-ic- class name this is why you only need to specify only the icon name to the attribute. Of course, this is only will work with the built-in icons.

For external icons the empty string states that it won’t render any built-in icon and you’ll need some css overrides for updating the default mobiscroll icons styles including the font-family in order to use external resources (in the above examples this would be the icon and micons classes).

Other class names are specific to the external icons.

That navigation demo uses an external icon set this is why it uses the micons class is used there. You should check that demo’s css section and the resources should be there in the css folder if you download the demo.

Please let me know if this explains!

3

I’m still confused about the icons.

For example, on the icons page it shows this example:

<span class="mbsc-ic mbsc-ic-pencil"></span>

What does “mbsc-ic” do? And how do I know when to use it?

And why do some example show things like “fas fa-external-link-alt”. What does “fas” do and how do I know when to use it?

4

The mbsc-ic css class defines the general styles for the font icons and the mbsc-ic-pencil defines the specific style needed to display the pencil icon. You will only need to use the mbsc-ic prefix if you would like to use these font icons outside Mobiscroll components.

In case of a Mobiscroll component, you’ll need to just specify the icon name. Example:

<button data-icon="pencil">Pencil</button>

But if you want to use this icon outside of Mobiscroll components you’ll need the mbsc-ic class and prefix:

<span class="mbsc-ic mbsc-ic-pencil"></span>

The other example which you are referring(“fas fa-external-link-alt”) is an external Font awesome icon example form here . That documentation section explains how can other font icons which are not built into the Mobiscoll used inside Mobiscroll components. In this case the fas class is a Font Awesome specific class and it is not related to Mobiscroll but it is similar what the mbsc-ic class do.

Let me know if this explains!

5

That helps a lot. Thank you.

(you might want to consider making your documentation a little bit more verbose for clarity).