Enhancing WordPress Icons for Parent and Child Elements

I am seeking to customize icons on a WordPress website. The site contains a variety of product categories, including subcategories.

My goal is to display one icon for parent categories and a different icon for child categories. I have tried the following CSS:

.widget_product_categories ul li:before { content: "\f7ab"; }

While this code successfully changed all the icons, I am struggling to differentiate between parent and child categories. I need assistance with implementing this in CSS. Thank you for your help.

ul.product-categories {
}
.widget_archive ul, .widget_categories ul, .widget_layered_nav_filters ul, .widget_layered_nav ul, .widget_links ul, .widget_nav_menu ul, .widget_pages ul, .widget_product_categories ul, .widget_recent_comments ul, .widget_recent_entries ul {
    margin: 0;
}
(widget_area .widget {
    font-size: .875em;
    font-weight: 400;
}
.header-widget-region, .site-content {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
body, .secondary-navigation a {
    color: #0d25ad;
}
body, button, input, select, textarea {
    font-family: Source Sans Pro,HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;
}
body, button, input, textarea {
    color: #43454b;
    line-height: 1.618;
    text-rendering: optimizeLegibility;
    font-weight: 400;
}
body {
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}
:root {
    --wp-admin-theme-color: #007cba;
    --wp-admin-theme-color-darker-10: #006ba1;
    --wp-admin-theme-color-darker-20: #005a87;
<ul class="product-categories" wfd-id="31"><li class="cat-item cat-item-20 cat-parent" wfd-id="53"><a href="https://www.naturalriders.fr/categorie/le-cavalier/">Le Cavalier</a><ul class="children" wfd-id="54">
<li class="cat-item cat-item-39" wfd-id="58"><a href="https://www.naturalriders.fr/categorie/le-cavalier/accessoires/">Accessoires</a></li>
<li class="cat-item cat-item-36" wfd-id="57"><a href="https://www.naturalriders.fr/categorie/le-cavalier/bracelets/">Bracelets</a></li>
<li class="cat-item cat-item-37" wfd-id="56"><a href="https://www.naturalriders.fr/categorie/le-cavalier/ceintures/">Ceintures</a></li>
<li class="cat-item cat-item-38" wfd-id="55"><a href="https://www.naturalriders.fr/categorie/le-cavalier/tours-de-chapeaux/">Tours de chapeaux</a></li>
</ul>

htmlcsswordpressicons

Answer №1

To distinguish them, you can apply the following styles: 

.widget_product_categories ul li:before { content: "\f7ab"; }
for the parent category and 
.widget_product_categories ul li ul li:before { content: ""}
for the child category.

By the way, there seems to be an error in your HTML code. You are missing one </li> tag and one </ul> tag.

Answer №2

Would you mind displaying the HTML code for both categories and subcategories? It is important to distinguish between the two, so we can provide appropriate CSS or JavaScript solutions such as creating new classes. Thank you! :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering a jQuery error while trying to utilize the $window.load

I have a code snippet that is functioning well when wrapped within a document ready event: jQuery(document).ready(function($) { $('tr[data-name="background_colour"] input.wp-color-picker').each(function() { //this section works fin ...

javascriptjqueryhtmlcssiframe

Attempting to showcase a button element within a popover, although it is failing to appear

I have implemented a feature where a popover appears when hovering over an inbox icon (font-awesome). However, I am facing an issue with displaying a button on the second row within the popover. The title is showing up fine, but the button is not appearing ...

javascripthtmljquerycssbootstrap-4

Tips for CSS and jQuery: Show link when hovered over and switch the visibility of a content div

I'm facing an issue with a link in the horizontal navigation bar. When a user hovers over it, I want another div to slide down just below it. The problem is that using the .toggle method doesn't work as expected. It continuously toggles the div e ...

jquerycss

"Enhancing Your List Design: Customizing CSS for Hover Effects on Images

I'm currently working on a CSS/HTML list that utilizes an image as the background and changes to a different image when hovered over. However, I've encountered an issue where the hover image is not aligning properly, leaving a noticeable gap. T ...

htmlcss

What is the process for eliminating the hover effect on a Bootstrap button?

I have customized a Bootstrap button in my stylesheet to make it dark, but it still has a hover effect from Bootstrap that I want to remove. How can I get rid of this hover effect? Take a look at the code snippet below for reference: .btn-dark { min-w ...

htmlcsstwitter-bootstrap-3

Are there ways to incorporate extra icons into NavMenu in Blazor 8?

I am exploring ways to incorporate extra icons into the NavMenu.razor component of my Blazor version 8 application. In the earlier version, Blazor 7, there was an iconset setup located in wwwroot/css/, which allowed me to include additional icons simply by ...

cssblazoricons

Python is the way to go for clicking on a link

I have a piece of HTML and I am in need of a Python script using selenium to click on the element "Odhlásit se". <div class="no-top-bar-right"> <ul class="vertical medium-horizontal menu" dat ...

pythonhtmlselenium

Vertical stability bar

I need help creating a vertically fixed navigation bar for my website. Currently, I am using a method that has been discussed in various posts: HTML: <html> <head> src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">< ...

javascripthtmlcss

Concealing option value based on ng-if conditions in AngularJS: A guide

I am designing an Input form with two input fields that need to be compared and values displayed if a certain condition is met. The input fields are: <td class="td_label"><label>Client Age :</label></td> <td class="td_input"> ...

javascripthtmlangularjsangular-ng-if

Achieve full height in Grid component of material UI by eliminating margins

In this codesandbox example, I have successfully set the grid container height to full using 100vh. However, there is an issue with a margin of 8px being added by the user agent to the body element, and I'm struggling to find a solution to remove it. ...

cssresponsive-designmaterial-uigridresponsive

Guide to converting a specific tag into div using Javascript

I am working with some HTML code that includes a div: <div class="myDiv"> <a href="" title="">My link</a> <p>This is a paragraph</p> <script>//This is a script</script> </div> Additionally, I ha ...

javascriptjqueryhtmlregex

How can I modify my code to ensure that trs and th elements are not selected if their display property is set to none?

I am currently working on creating a filter for my pivot table, but I am unsure of how to dynamically calculate the sum of each row/column based on whether they are displayed or not. If you need any other part of my code, feel free to ask. To hide employee ...

javascripthtmlhtml-table

What is the best way to show only the weekdays on the x-axis?

My goal is to create a scatter-linked graph using D3.js, showcasing the people count for various shifts on different dates in January 2020. Here is the code snippet I am working with: <!DOCTYPE html> <html lang="en" > <head> & ...

javascripthtmlcssd3.jssvg

Implementing raw static HTML files in webpack: a step-by-step guide

Recently, I created a basic template called test.html <div>raw text with content</div> All I'm trying to achieve is to import the raw file without any alterations For example: require('./test.html'); // This should return "&l ...

javascripthtmlnode.jsnpmwebpack

What is the most efficient method for transferring ASP.NET form data to an Excel spreadsheet?

I am confident that exporting data from my web form should be achievable, but I'm not quite sure of the steps involved. My web form contains numerous select dropdowns and input boxes. Could anyone guide me on how to export the data from these asp co ...

htmlasp.netexcel

Using SVG background images in Internet Explorer versions 7 and 8: a guide to HTML, CSS,

I have created a unique SVG image to use as a background, but it's not displaying in Internet Explorer 8 and earlier versions. I tried using tools like or http://code.google.com/p/svgweb/, but they only support SVG for IMG and Object elements, not ba ...

htmlcssinternet-explorer-8svgbackground-image

"Maximizing battery life: Efficient video playback on iOS in low power

Summary: I am currently working on a website that features a video set as the background which autoplays. However, I have encountered an issue on iOS devices when "Low Power Mode" is activated - the video fails to play and instead displays a large "Play" i ...

javascripthtmlcssioswordpress

Inject HTML entities, escaped for CSS, dynamically using JavaScript

My goal is to dynamically generate a list of HTMLElements with unique data-* attributes that correspond to various HTML Entities. These attributes will then be utilized by CSS to display content in pseudo elements like this: li:after { content: attr(dat ...

javascripthtmlcssfontsescaping

Obtaining two divisions that simultaneously display partials in a parallel manner

It's proving difficult to align two divs containing rendered partials side by side within a form. Strangely enough, when I replace the divs with plain text, they respond perfectly to my style changes. However, as soon as I include the render code, the ...

htmlcssruby-on-rails

Adjust the color of the paper in Material-UI

I'm in the process of creating a React project using the material-ui library. Currently, I am facing an issue with customizing the drawer component's background color. After some research, I learned that modifying the paper attribute of the drawe ...

javascriptcssreactjsmaterial-uiclass-names