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.

/**
 * 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 );

Ask a Question

Your email address will not be published.