Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #396934

    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 9 years, 1 month ago by Elliott.
    #397212

    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

    #480452

    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!

    #480470

    Hey!

    Please add following code to Quick CSS

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

    Best regards,
    Yigit

    #480486

    awesome!
    Thanks Yigit!

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