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.

https://i.sstatic.net/sTm1O.png

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

The art of organizing dates and times

Need help with formatting a datetime that is retrieved from the database. The current format is as follows: 2012-06-11 21:39:54 I would like to display it in the format of June 11. Any suggestions on how this can be achieved? Thank you! ...

phpmysqlhtml

Positioning my login form in the right spot is proving to be a challenge

I'm working on integrating this form into my website, but I'm having trouble placing it in the top right corner of the header. Below is the HTML code: $(function(){ var $form_inputs = $('form input'); var $rainbow_and_b ...

htmlcssforms

Adding dynamic text to a <span> tag within a <p> element is causing a disruption in my layout

I'm encountering an issue with a Dialog box that displays a message to the user regarding file deletion. Here's how it looks: +-----------------------------------------------------------------------+ | Delete File? ...

javascripthtmlcss

Instructions for activating a button in the absence of any inputs

I need help enabling a button in angularjs based on whether any of the inputs are filled out. I was successful in disabling a button when only one input is checked, but how can I do this for all inputs affecting one button? This is what I've attempted ...

javascripthtmlangularjs

Looping through ViewData strings and populating a form with their values

I am currently utilizing ASP.NET and MVC to work on a project where I need to take a list of strings and populate a form with them. The goal is for users to import account numbers, have the form prefilled with these numbers, and then submit the data. I&apo ...

javascripthtmlasp.net-mvcrazorviewbag

combine several MySQL queries into one query

QUESTION 1... $first_query_result = $wpdb->get_results("SELECT wp_users.ID,wp_users.user_login,wp_users.user_registered,wp_users.user_email,t.total,t.acc_nums FROM wp_users LEFT JOIN wp_usermeta ON ( wp_users.ID = wp_usermeta.user_id ) left join (SELEC ...

phpmysqlwordpress

Tips for updating the value of an input text field in one HTML table according to a certain value entered in a different input text field located in another HTML table

I am working with an HTML table that consists of one row. Within this row, there are two TDs which each hold their own tables (each containing 10 rows with 10 input fields). My goal is to update the value of another corresponding text field based on change ...

javascripthtmljsp

Looking to customize the display format of your WordPress Archive?

I'm having an issue with my WordPress blog archive display. Currently, it shows the archives in a month by month format starting from the most recent: November 2014 October 2014 September 2014 August 2014 July 2014 June 2014 May 2014 .. ...

phpwordpressarchivecodex

Can anyone recommend a user-friendly JavaScript dialog box compatible with jQuery that is mobile-responsive?

Mobile browsers. Using Jquery dialog alert box. Avoiding the use of alert() due to its unattractive appearance in web browsers. In the process of creating a website for both mobile and web platforms, seeking a dialog box that is compatible with both. ...

javascriptjquerycssbrowsermobile

Is there a way to transfer table row data to another table by simply clicking on the corresponding checkbox in the same row?

I'm working with a table that includes 4 fields: service, amount, tax, and action. My challenge is to have the data from any row in the first table added to a second table when its checkbox is selected. The second table should have the same fields a ...

javascriptjqueryhtml

Animate the entire paragraph with CSS hover effect

I'm seeking ideas on how to achieve a specific effect without the need to wrap individual lines in inner elements like span or a. Check out this example <div class="m-linkitem"> <h1>Hover Below</h1> <a href="#">Lorem ...

javascriptjqueryhtmlcss

What is the best way to use a handlebar ternary operation to dynamically add an HTML element in AngularJS?

Please Note: When I refer to "handlebars," I am not talking about Handlebars.js, but rather the double curly braces. I have a table where I need to display data in one of the columns along with an additional HTML element based on the result of a ternary o ...

javascriptjqueryhtmlangularjs

The H1 heading sets the stage, layered behind the captivating background image

I'm having trouble getting the h1 header to stand out over a background image with a box-like color for the header. Every time I make changes to the h1, they seem to be hidden behind the background image and only briefly show before being covered up. ...

htmlcssflexbox

I have found that the CSS property command for multiple columns functions properly in Opera and IE, but unfortunately does not work in Firefox, Chrome, or Safari

When viewing the html code below, it appears as two columns in Opera and IE10, but only one column in Chrome, Safari, and Firefox. Can anyone explain why this is happening? The styling code [ body{column-count: 2} ] seems to only be effective in Opera and ...

htmlcss

What methods are available to generate dynamic shapes using HTML?

Looking to create an interactive triangle where users can move vertices or sides, updating angles in real-time. I'm struggling with how to accomplish this task. My initial attempt was to manually draw the triangle using the code below. <!DOCTYPE ht ...

javascripthtmlcss

Tips on eliminating the gap between the dropdown menu in Firefox browser

After testing in Chrome and seeing no issues, I noticed that the input field's position changes and there is spacing between the dropdowns when opening in Firefox. View in Firefox browser: https://i.stack.imgur.com/WYpuy.png View in Chrome browser: ...

htmlcss

Is there a way to adjust the height of a DIV based on the background image and keep the text centered at the same time?

Currently in the process of designing a landing page for my website, and I am interested in incorporating a Jumbotron to provide a more modern and tech-savvy touch. Successfully managed to center my text both horizontally and vertically, now looking into s ...

htmlcss

The subquery in a WordPress postmeta query is retrieving multiple rows instead of just one

My current challenge involves extracting data from a subsite's posts and postmeta tables: SELECT xyz_8_posts.ID, (select xyz_8_postmeta.meta_value from xyz_8_postmeta inner join xyz_8_posts on xyz_8_postmeta.post_id = xyz_8_posts.ID where xyz_8_postm ...

mysqlsqlwordpresspost-meta

The challenges with implementing makeStyles in React Material UI

const useStyles = makeStyles((theme) => ({ toolbarMargin: { ...theme.mixins.toolbar, marginBottom: "3em", }, logo: { height: "7em", }, tabContainer: { marginLeft: "auto", }, tab: { ...theme ...

javascriptcssreactjsmaterial-uiweb-development-server

Show a specific portion of an extremely large .svg image file using Angular.js directive with the help of javascript or css

Currently, I am facing a challenge with a large map image (3000x8000px) in .png format that I have converted to .svg for data visualization purposes. I am struggling to find a way to display a specific small section of this map.svg file on an HTML page u ...

jqueryhtmlcsssvgangularjs-directive