Page 1 of 1

Change color icons

Posted: 05 Nov 2018, 15:58
by biooib
Hi, I have purchased volt theme-layout and I have to change some colors.

I dont know how to change the arrows icons colors in a datatable (Blue default volt color)


I've tryed to override css and use and ui-icons_COLOR_256x240.png like here: ... 7#19121287

with no luck.

The icon picture refers to a different img, not mine saved locally.


Could you tell me the easy way to do it. Thanks.

Re: Change color icons

Posted: 06 Nov 2018, 07:53
by aragorn

For this issue,
You need to override the following style to add new custom icon with color that you want ;

Code: Select all

.ui-datatable table thead tr .ui-state-default .ui-icon-carat-2-n-s, .ui-datatable .ui-datatable-sticky table thead tr .ui-state-default .ui-icon-carat-2-n-s {
	background-image: <your_image_url>
You need to edit .svg file. Exp; Please open updown-navy-arrow.svg with text editor or IDE. SVG code of it;

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "">
<svg version="1.1" id="Layer_3" xmlns="" xmlns:xlink="" x="0px" y="0px"
	 width="600px" height="600px" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve">
	<path fill="#29506B" d="M36.776,315.053c14.804,14.838,38.905,14.838,53.741,0l30.145-30.146v137.67
	<path fill="#29506B" d="M319.43,284.948c-14.839,14.844-14.839,38.91,0,53.746l121.894,121.889l121.891-121.889
Please change the color of fill property. Exp; <path fill="#000000" ...

Re: Change color icons

Posted: 06 Nov 2018, 10:39
by biooib
Thank you! . It works fine.

Re: Change color icons

Posted: 06 Nov 2018, 10:52
by aragorn
Glad to hear, thanks a lot for the update!