Archived topic
Tags are not showing in the pages
31 replies · Started by Oppo Gene on October 28, 2022
Add this CSS to unhide the icon:
.entry-header .entry-meta .gp-icon {
display: inline;
}
One last thing related tags, can I show different tags of current post, with separate gp tag icon of each tag? If so, can you also share CSS regarding this.
(Screenshot)
https://postimg.cc/9DszNgRZ
https://postimg.cc/2brkPszb
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
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
You need the snippet from here:
https://generatepress.com/forums/topic/tags-are-not-showing-in-the-pages/#post-2401433