-1

I've got this <ul> set up with pseudo-element icons before each item. Font Awesome's check mark icon is set as the default for every <li>, but I want to use specific icons for certain items based on their ID (or class. That doesn't seem to work either). But the specific icon content declaration doesn't appear to override the default one, even though the selector should be more specific. Here's a quick example:

.cvt-product-tags li:before {
    content: '\f00c'; /* Default checkmark icon */
    font-family: 'Font Awesome 5 Pro';
}
      /* Custom per-li icons */
      .cvt-product-tags li#1394:before {
        content: '\f21a'!important; /* Custom boat icon */
      }
      .cvt-product-tags li#1384:before {
        content: '\f207'!important; /* Custom bus icon */
    }

I set up a more complete pen over here: https://codepen.io/dimedici/pen/PowGbdv.

The confounding thing is that I had something very similar working before some markup changes wherein the content declaration was being properly overridden. What am I doing wrong? Or, more importantly, how do I get it to work right?

Ethan
  • 3
  • 3

2 Answers2

0

CSS selectors that start with a number have to be handled in a special manner. 

.cvt-product-tags li[id='1394']:before {
    content: '\f21a'!important; /* Custom boat icon */
}
 /* The space is important */
.cvt-product-tags li#\31 394:before {
    content: '\f21a'!important; /* Custom boat icon */
}
Steven B.
  • 8,962
  • 3
  • 24
  • 45
  • Ah, heck yeah! Both those solutions work. So the top example is an attribute selector, which I grok. While the bottom... is doing something else. Thanks for your help! – Ethan Dec 14 '19 at 03:39
  • @Ethan the bottom is just the way you escape characters in css. – Steven B. Dec 14 '19 at 05:11
0

You created issue using integer for ID. You have to change id name integer to string. i.e.: #1394 to #boat-1394. If you want to use integer for ID or Class then you have to write CSS in difference style. i.e.: [id="1394"] or [class="1394"].

Check the snippet below.

.container {
  width:26em;
  font-family: sans-serif;
}
.cvt-product-tags {
 -webkit-columns: 2 10em;
 -moz-columns: 2 10em;
 columns: 2 10em;
 -webkit-column-gap: 2em;
 -moz-column-gap: 2em;
 column-gap: 2em;
 margin: 1em 0;
  padding-left:2.1em;
  list-style-type: none;
}
.cvt-product-tags li {
 margin-bottom: .75em;
 line-height: 1.2em;
}
.cvt-product-tags li:before {
 content: '\f00c'; /* Default checkmark icon */
 font-family: 'Font Awesome 5 Pro';
 color: #fff;
 font-size: 0.75em;
 line-height: 2;
 text-align: center;
 background: #b84542;
 display: inline-block;
 margin: 0 0.8em 0 -2.8em;
 width: 2em;
 border-radius: 50%;
}
  /* Custom per-tag icons */
   /* Boat Tour */
   .cvt-product-tags li#boat-1394:before {
    content: '\f21a'!important;
   }
   /* Bus Tour */
   .cvt-product-tags li[id="1384"]:before {
    content: '\f207'!important;
    }
    /* Family Friendly */
    .cvt-product-tags li[id="1377"]:before {
      content: '\f1ae'!important;
    }
    /* Helicopter Tour */
    .cvt-product-tags li[id="1385"]:before {
      content: '\f533'!important;
    }
    /* Meals Included */
    .cvt-product-tags li[id="1378"]:before {
      content: '\f2e7'!important;
    }
    /* Money-back Guarantee */
    .cvt-product-tags li[id="1383"]:before {
      content: '\f53a'!important;
    }
<link href="https://pro.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet"/>
<link href="https://static.fontawesome.com/css/fontawesome-app.css" rel="stylesheet"/>
<div class="container">
  <ul class="cvt-product-tags">
    <li id="boat-1394"><a href="/experience-tag/boat-tour/">Boat Tour</a></li>
    <li id="1384"><a href="/experience-tag/bus-tour/">Bus Tour</a></li>
    <li id="1377"><a href="/experience-tag/family-friendly/">Family-Friendly</a></li>
    <li id="1385"><a href="/experience-tag/helicopter-tour/">Helicopter Tour</a></li>
    <li id="1383"><a href="/experience-tag/money-back-guarantee/">Money-back Guarantee</a></li>
  </ul>
</div>

Hope this will help!

Rahul
  • 2,011
  • 3
  • 18
  • 31
  • Gotcha. Those integers were the tag ID that WordPress/WooCommerce assigned to my products' tags. I didn't know that CSS treated integer-only classes and IDs differently. Thanks for the explanation. – Ethan Dec 15 '19 at 06:32