Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • February 16, 2015 at 6:50 pm #396934
    hobeadmin

    Hello!

    This is my website: http://kerrybutlerdesign.com/work/ and I would like the icons to link to sort my portfolio pieces based on category. For example, if you click on the first icon, I would like it to just show branding, but still stay on the Work page, not navigate to the Branding category page.

    I would like my icons to function exactly how the buttons function on your page: http://kriesi.at/theme-overview

    What link should I assign the icons? Is there specific code involved?

    Thanks so much for your help!

    • This topic was modified 10 years, 8 months ago by Elliott.
    February 17, 2015 at 3:27 am #397212
    Josue

    Hi!

    You can use convert he current filter buttons to icons, add this to Quick CSS:

    /* Styling */
.inner_sort_button:after{
    font-family: 'entypo-fontello';
    font-size: 24px
}
.inner_sort_button span {
    display: none;
}
#js_sort_items .text-sep{
    display: none !important;
}
#js_sort_items a{
    padding: 0 10px;
}

/* Icon codes for each icon (note the classes) */
.all_sort_button .inner_sort_button:after{
    content: "\e822";
}
.branding_sort_button .inner_sort_button:after{
    content: "\e824";
}
.interactive-design_sort_button .inner_sort_button:after{
    content: "\e826";
}
.photography_sort_button .inner_sort_button:after{
    content: "\e827";
}
.print-design_sort_button .inner_sort_button:after{
    content: "\e828";
}
.web-design_sort_button .inner_sort_button:after{
    content: "\e839";
}

    P.S.
    To find out the codes for each Icon: create a Page and add any icon-based element, when you’re about to select the icon to use, place the mouse over for some seconds, a tooltip with the icon code will show.

    Regards,
    Josue

    July 29, 2015 at 11:10 pm #480452
    Armando Nava

    hello!

    This is awesome! I already used this code on my website

    just wanted to know how to not show the separator ( “/” ) between icons

    Regards!

    July 30, 2015 at 12:32 am #480470
    Yigit

    Hey!

    Please add following code to Quick CSS

    .av-sort-by-term .text-sep {
    display: none !important;
}

    Best regards,
    Yigit

    July 30, 2015 at 12:57 am #480486
    Armando Nava

    awesome!
    Thanks Yigit!

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Adding icons to elements via CSS’ is closed to new replies.