ZodiacPress

Change Colors of Zodiac Icons With a Function

You can set custom colors for the zodiac signs by adding the following to your functions file. Set the color for fire signs on line 10. Set the color for earth signs on line 16. Set the color for air signs on line 22. Set the color for water signs on line 28.

(Note that this can also be done with CSS.)

/**
 * Change the colors of zodiac icons.
 */
function my_zp_custom_icon_colors() {

	
	$css = '.zp-icon-aries:before,.zp-icon-leo:before,.zp-icon-sagittarius:before {

				/* Fire signs */
				color:#FF0000
			
			}
			.zp-icon-taurus:before,.zp-icon-virgo:before,.zp-icon-capricorn:before {

				/* Earth signs */
				color:#008000

			}
			.zp-icon-gemini:before,.zp-icon-libra:before,.zp-icon-aquarius:before {

				/* Air signs */
				color:#FFFF00

			}
			.zp-icon-cancer:before,.zp-icon-scorpio:before,.zp-icon-pisces:before {

				/* Water signs */
				color:#0000CD

			}';						

	wp_add_inline_style( 'zp', $css );				
}
add_action( 'wp_enqueue_scripts', 'my_zp_custom_icon_colors', 99 );

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:

[code]

YOUR CODE HERE 

[/code]