Change Icon of Web Site Link on Listing Page

This topic contains 3 replies, has 2 voices, and was last updated by  Alex Rollin 5 years, 3 months ago.

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket
  • Author
    Posts
  • #459242

    Greg Barr
    Full Member
    Post count: 182

    On my listing page I want to change the web site icon from the upward-pointing arrow to something that says “Web site” a little more clearly, as the arrow doesn’t say “web site” to me.

    Here’s an example of my listing page, you can see I’ve already supersized the icons and made the Facebook one blue.
    null

    In another thread somebody said you can supposedly change the icon to text with this CSS, but it’s not having any effect for me, and isn’t exactly what I want to do.

    
    
    .fa-external-link-square::before {
        content: "TEXT HERE";
    }

    Any suggestions for how I can swap that icon out for something more web-site-y, like the little wireframe globe or a home? https://www.google.com/search?q=icon+for+website

    #459256

    Alex Rollin
    Moderator
    Post count: 27815

    This is one of the great features we have made very easy to use in GDV2. That icon and the entire feature is part of the theme in GDV1, but in V2 you can change out those icons easily by either adjusting the icon settings in the custom fields or by using the gd_post_badge shortcode to create your own icon-links.

    For V1 it is a customization. There is an example of how you can achieve it here: https://wpgeodirectory.com/docs/faqs/detail-page/

    #459261

    Greg Barr
    Full Member
    Post count: 182

    Thanks. I found what seems like the appropriate instructions, and get the general idea.

    
    
     = 'CATEGORY ICON URL';
             $terms_icons['946'] = 'http://mysite.com/wp-content/uploads/2018/01/my-other-icon.png';
        }
        return $terms_icons;
    }
    add_filter( 'geodir_get_term_icons', '_gd_custom_detail_page_category_icon', 10, 2 );

    But I’m hoping you can help a teensy bit more.
    Here is the CSS that currently defines that icon.

    It’s not clear to me where the two things overlap, i.e. which elements of the current CSS are elements I need to set in that suggested code. Like where in the code am I indicating that I want this other image to replace the icon for website, instead of for Facebook. Does that make sense?

    Seems like maybe it’s the “946” up front, but I dont see any 3-digit codes in the CSS/HTML for that icon. Or, more accurately, I see way to MANY 3-digit numbers. Could also be the “10,2” at the end, but again, I don’t see any obviously apparent equivalents.

    #459264

    Alex Rollin
    Moderator
    Post count: 27815

    That snippet is for category icons. The first one on the page is for the header social icons area.

    Every FA icon page has a sample for how to use the icon, which should work with GDs version of FA

    https://fontawesome.com/icons/search?style=solid

    <i class=”fas fa-search”></i>

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

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket