Change Icon of Web Site Link on Listing Page

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

Open Support Ticket

Author

Posts
December 18, 2018 at 11:13 pm #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.

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
December 19, 2018 at 12:31 am #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/

December 19, 2018 at 12:44 am #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.
December 19, 2018 at 12:53 am #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>
Author

Posts