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


    This is my website: 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:

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

    Thanks so much for your help!

    • This topic was modified 4 years, 9 months ago by  Elliott.


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

    /* Styling */
        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";

    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.




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

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




    Please add following code to Quick CSS

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

    Best regards,


    Thanks Yigit!

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Adding icons to elements via CSS’ is closed to new replies.