[TIP-NING 3.0] Add icon in menu tabs!!

[sho allan]

Hi there :)

NING 3.0 has still any problem, however we knew NING 3.0 is totaly POWERFUL more than NING 2.0.

As you know, Individual CSS-MarkUp is gone in NING 3.0. It means, You can not add any icon on each menu-tab.

Do you know you can use "<i>"tag in Tab-title?
So, You can add the icon using <i> tag :D

See Example: http://skf-japan.ning.com*I'm sorry. This is Japanese Site.

[How to do that?]

1: Site&Page

At first, You need add to <i>tag in your tab-title.
If the tab-title name is "TOP", You can add <i> tag with class name. "<i class="h"></i>TOP ".

2:Add CSS code!!
Add CSS code like this,
-----------------------
.h{
    background: url("https://storage.ning.com/topology/rest/1.0/file/get/3240346?profile=original") ;
    display: block;
    float: left;
    height: 16px;
    margin-right: 3px;
    margin-top: 5px;
    width: 16px;
}
-----------------------

You can see "home-icon" in your menu-tab :D

[Example]

This is my code of adding icons...

Icon file: https://api.ning.com/files/kY9puDXSBJbqKFgQOZWGjPvTxdeEQeTAEvCzMW9ZoQ9SAXNuHrnwj4AVGNn0Tre0t8fS*RiFBsxackGCfw8X83srDvAiYaHN/menuicon.png

• <i class="h"></i> => Home icon
• <i class="j"></i> => Question icon
• <i class="s"></i> => World icon
• <i class="t"></i> => Calender icon
• <i class="m"></i> => Video icon
• <i class="k"></i> => Star icon
• <i class="g"></i> => Direction icon

---CSS Code----------------------------

.h,.j,.s,.t,.m,.k,.g{
    background: url("https://storage.ning.com/topology/rest/1.0/file/get/3240346?profile=original") ;
    display: block;
    float: left;
    height: 16px;
    margin-right: 3px;
    margin-top: 5px;
    width: 16px;
}
.j{
background-position:0 -16px;
}
.s{
background-position:0 -32px;
}
.t{
background-position:0 -48px;
}
.m{
background-position:0 -64px;
}
.k{
background-position:0 -80px;
}
.g{
background-position:0 -96px;
}

---------------------------------------

If you have any question, Please let me know!!

【The site using this TIP :D】

• Shin Koyamada Foundation
  
  
  
  
  
• Keeping it Real - Susan Boyle
  

[sho allan]

Hi Ningaholic :)

Thanks a lot!!

Tab-title has a limit to type digit on NING 3.0.
I hope NING will remove or longer the limit.

good luck,
SHO

[Tomo sato]

Hi！Whats up?　

[sho allan]

Hi sato-san.

Thanks for your comment!!
As you know, I'm sharing some TIPs on NING Creators.

If you have any question about TIPs, Please let me know.

[Bree]

I have tried this out on my site using different icons. Thanks for sharing

[sho allan]

Hi Bree :)

Thanks for using my TIP!!

That's so nice site, I will add example of the TIP!!

good luck,
SHO

[Kos]

Going to try this today.  Fingers crossed I don't screw it up *lol*

[CPA]

Thanks Sho, I'm going to try this!

[Kos]

I was able to do it but you're right; I wish they allowed for more characters in the Tab Name.   Seven (7) character limit after the <i> tag is definitely limiting.  Designed my own pic in Pixlr, fiddled with the height and width in the code and *wallah*.  See in action in my 3.0 sandbox here.  May tweak a little further but I've got it now.  Thanks again for sharing.

[Matthew Aukai Wright]

hi there how can i make my own icons to put on my menu?

[Kyryl_Ning_Support]

Hi Matthew,

In this post, one background image is used to for separate icons only the position is getting changed. If you are willing to use your own icons you should create such background, well it look's like this 

The height of each icon does matter, for example, here each icon has 16 px size that is why the background position differs for this value for each icon. If you don't wish to bother yourself much with the code you can create the background with icons, keeping in mind that each icon should 16px*16px. and you can have up to 6 of them. After that just replace the URL of the background image used in example (https://api.ning.com/files/DqaYw0w2aP9*Om*5mNl3VlwPlAhRgRbiUCTK18zOuuEGZXZ*9nq4S-dZQRm5nz2lpfOfsjWIK0n241lTEsnD41ysQpIclvYS/1059733405.png) with the link to your background image with your icons.

Hope this helps.

Best regards,

Ning Team.