Site logo

Archived topic

Tags are not showing in the pages

31 replies · Started by Oppo Gene on October 28, 2022

Viewing posts 16–30 of 32

Add this CSS to unhide the icon:

.entry-header .entry-meta .gp-icon {
    display: inline;
}

Also please tell through which typography or other option should I edit the tags fonts and icon colour

Just so i am clear, if you had 3 tags, you want each of them to have their own specific icon ?

Typography:

1. Customizer > Typography +-> New Typography
2. Select the Custom element and add: entry-meta in the CSS field.
3. Set your typography styles

Color:

1. Customizer > Colors
2. Set the Entry Meta and Entry Meta Link colors

Just so i am clear, if you had 3 tags, you want each of them to have their own specific icon ?

Yes.

OK, seeing as you have Font Awesome loading on your site. You can use its icons.
For each icon you will need to get its Unicode which can be found here:

https://fontawesome.com/search

When you select an Icon and click copy Unicode you will get something like: f001
Add a back slash to that eg. \f001

Now we write some generic CSS to prepare each tag link to have its own icon:


.tags-links a[rel="tag"]:before {
    content: '';
    font-size: 18px;
    font-family: "Font Awesome 5 Free";
    margin-right: 5px
}

Then you need a specific CSS rule for each tag.
To target each tag we will look for the tag slug in the href. For example the latest tag:


.tags-links a[rel="tag"][href*="latest"]:before {
    content: '\f001';
}

Just create a new rule for each tag, and swap the \f001 unicode for your icon.

Hi David I have used this

.tags-links a[rel="tag"][href*="latest"]:before {
content: '\f001';
}

Its shows an icon before tag, (screenshot Icontag), but its not the thing I want theme tag icon to appear before every tag as shown in screenshot (Icontag2).

https://postimg.cc/Cz0q7BbN (Icontag)
https://postimg.cc/BjLPQT3J (Icontag2) Required

Hi Hassnain,

To clarify, are you wanting to add unique icons to each tag?

Or, are you wanting to replace to icon your referred to in Icontag2?

If you can provide an example, that would be great as well.

Let us know.

Hi, I don't want to replace the theme icon tag.

(Example)

Current settings: Theme Tag Icon - Tag. (If I create more tags in the current post, it would be) Theme Tag Icon - Tag, Tag, Tag

Required settings: Theme Tag Icon - Tag, Tag Icon - Tag, Tag Icon - Tag (every tag will show it's Icon Tag, before it)

I Hope this will clear you what I wanted for tags

I see. The codes provided by David should do just that for Fontawesome.

Can you try these?:

.tags-links a[rel="tag"]:before {
    content: '';
    font-size: 18px;
    font-family: "Font Awesome 5 Free"
    margin-right: 5px;
    font-weight: 900;
}

.tags-links a[rel="tag"][href*="latest"]:before {
    content: '\f555 - ';
}

.tags-links a[rel="tag"][href*="x5"]:before {
    content: '\f007 - ';
}

again you didn't get it. I want .gp-icon svg, to appear before every tag. Inspect GP ICON SVG, on the given page "https://opporingtones.com/download/download-realme-narzo-50i-prime-default-ringtone/" the image of icon is also shared in screenshot

https://postimg.cc/ctLtTXmq

1. Remove this CSS:

.entry-header .entry-meta .gp-icon {
    display: inline;
}

And remove any other CSS you added for the other icons.

2. Add this CSS:


.tags-links a[rel="tag"]:before {
    content: '\f02c';
    font-size: 18px;
    font-family: "Font Awesome 5 Free";
    margin-right: 5px;
    font-weight: 900;
}

Hi David, Thanks, it's done finally. I am trying to do such on my another website, but it is not showing after GP Premium Plugin and the code you shared last.

I have checked it theme functions file, the code I found on Oppo After Updating the Premium Version is:
add_filter('term_links-post_tag','limit_to_five_tags');
function limit_to_five_tags($terms) {
return array_slice($terms,0,5,true);
}

This filter is not showing in Theme Function File I have add it manually and others snippets that you have shared with me. Nothing is working on it

and some other snippet that you have guide me like:
.entry-header .entry-meta .gp-icon {
display: inline;
}

Can you check it once that why anything is not working on it

Website: Tonesmp3.Ca

Thank You
Looking Forward

This archived topic is closed to new replies.