[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
  

[Kos]

Wow, I'll have to take a stab at this.  Thank you for sharing Sho Allan.

[sho allan]

Hi, Kos :)

Thanks for your reply!!

I will keep to share NING 3.0 TIPs!!

good luck,
SHO

[Jen]

What on Earth made you think to try a tag in a title? How cool. I would have never in a million years tested something like this. Nice job. =) I hope it's not a quirk, and that it continues to work. Keep us posted.

[sho allan]

Hi, Jen :)

Thanks a lot!!! but, be careful!!
Tab-title has the limit of type digit. so, you can not choose tab-title so longer.
I will keep to post NING 3.0 TIPs :D

good luck,
SHO

[Jen]

Hi SHO,

Yeah, I'd rather "watch" on this one. Please keep us posted.

Thanks,

Jen

[Jen]

;-) Me too!

[Jen]

;-) Me too!

[sho allan]

Thank you, Riccardo :D

[sho allan]

Thank you, Riccardo :D

[Jelena]

Wow great tip and innovative thank you for share it Sho Allan. Can I add a photo icon?

[sho allan]

Hi Jelena :)

Thanks a lot!!
Yeah, You can add a photo-icon !!

Please change one of any icon to 16px/16px photo-icon!!

good luck,
SHO

[Ningaholic]

This is good stuff...would like to see what kind of applications this could have...