Change Colors of Zodiac Icons

NOTE: This article refers to changing the colors for the zodiac icons that appear in the report, not on the chart wheel. To change the colors for the chart wheel, see Change Colors of Chart Wheel.


You can customize the colors of the zodiac sign icons by adding the following custom CSS.

(This is very easy to do since WordPress 4.7. See How To Add Custom CSS To Your WordPress Site)

In the CSS code below, replace the HTML color codes with your desired color codes.

For fire signs, replace #FF0000 on line 4 with your desired color.

For earth signs, replace #008000 on line 10 with your desired color.

For air signs, replace the color code on line 16.

For water signs, replace the color code on line 22.

#zp-report-content .zp-icon-aries:before,#zp-report-content .zp-icon-leo:before,#zp-report-content .zp-icon-sagittarius:before {
    /* Fire signs */
    color: #FF0000
#zp-report-content .zp-icon-taurus:before,#zp-report-content .zp-icon-virgo:before,#zp-report-content .zp-icon-capricorn:before {
    /* Earth signs */
    color: #008000
#zp-report-content .zp-icon-gemini:before,#zp-report-content .zp-icon-libra:before,#zp-report-content .zp-icon-aquarius:before {
    /* Air signs */
    color: #FFFF00
#zp-report-content .zp-icon-cancer:before, #zp-report-content .zp-icon-scorpio:before, #zp-report-content .zp-icon-pisces:before {
    /* Water signs */
    color: #0000CD

(Note that you can also change these colors using a function instead.)

Updated on May 8, 2019

Questions and Comments are Welcome

Your email address will not be published. All comments will be moderated.

Please wrap code in "code" bracket tags like this: