Help with custom CSS

Hello,

Below is a custom CSS that I put in Theme Panel/Custom code/Custom CSS.

.arrow-bottom {
background: url(images/arrow-bottom.svg) center center no-repeat;
}

.arrow-top {
background: url(images/arrow-top.svg) center center no-repeat;
}
.arrow-right {
background: url(images/arrow-right.svg) center center no-repeat;
}

I uploaded the icons svg in public_html/images/icons.

Question : what is the correct path to display the svg ( I tried images/icons/ but it’s not working ) ?

Thanks in advanced.

The way my CSS is done doesn’t match with full path.

To make it simple : can you let me know in wich folder is located the code written in Panel/Custom code/Custom CSS ? I should find the path from there.

Thanks in advanced.

Thanks Bettina,

You mean opening from the server ? There is no command to do so on my server https://www.screencast.com/t/122gZLbe2Qk.

This is were I put the icons : public_html/wp-content/themes/Newspaper/images/icons.

Any idea what should be the path from the posts and pages to find these icons ?

Thanks in advanced.

Hi Bettna,

I openned the svg on my cp with Notepad, and this is what I see :https://www.screencast.com/t/ff80c0TMhf9C.

Here is the full content :
********************************************************************
<?xml version=”1.0″ encoding=”iso-8859-1″?>
<!– Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) –>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”&gt;
<svg version=”1.1″ id=”Calque_1″ xmlns=”http://www.w3.org/2000/svg&#8221; xmlns:xlink=”http://www.w3.org/1999/xlink&#8221; x=”0px” y=”0px”
width=”16px” height=”16px” viewBox=”0 0 16 16″ style=”enable-background:new 0 0 16 16;” xml:space=”preserve”>
<path style=”fill:#31C3E5;” d=”M0.498,7.999c0-4.144,3.359-7.502,7.502-7.502c4.145,0,7.502,3.358,7.502,7.502
c0,4.144-3.357,7.502-7.502,7.502C3.857,15.501,0.498,12.143,0.498,7.999z M14.404,8c0-3.532-2.873-6.406-6.404-6.406
S1.594,4.467,1.594,8c0,3.529,2.875,6.404,6.406,6.404C11.532,14.404,14.404,11.529,14.404,8z M7.861,11.95
c-0.014-0.005-0.027-0.009-0.041-0.013c-0.017-0.006-0.033-0.01-0.05-0.017c-0.004-0.002-0.009-0.002-0.014-0.005
c-0.008-0.002-0.016-0.008-0.024-0.012c-0.016-0.008-0.03-0.016-0.046-0.022c-0.014-0.008-0.026-0.017-0.04-0.024
c-0.012-0.01-0.024-0.018-0.036-0.025c-0.015-0.012-0.027-0.023-0.04-0.035c-0.007-0.005-0.014-0.011-0.021-0.018l-2.981-2.98
C4.445,8.675,4.383,8.514,4.383,8.35c0-0.164,0.062-0.326,0.188-0.451c0.248-0.248,0.652-0.248,0.9,0l1.893,1.894V3.897
c0-0.176,0.071-0.336,0.187-0.451C7.666,3.331,7.824,3.26,8,3.26c0.132,0,0.254,0.04,0.356,0.108c0.169,0.114,0.28,0.309,0.28,0.528
v5.896l1.896-1.894c0.246-0.248,0.65-0.248,0.898,0c0.25,0.248,0.25,0.65,0,0.899l-2.979,2.98c-0.006,0.008-0.013,0.013-0.02,0.018
c-0.013,0.014-0.026,0.023-0.041,0.037c-0.011,0.008-0.022,0.016-0.033,0.021c-0.015,0.011-0.029,0.021-0.044,0.028
c-0.013,0.007-0.026,0.013-0.039,0.021c-0.01,0.004-0.02,0.011-0.029,0.016c-0.006,0.001-0.012,0.002-0.018,0.005
c-0.013,0.005-0.025,0.009-0.039,0.013c-0.018,0.006-0.034,0.01-0.051,0.015c-0.014,0.004-0.026,0.005-0.039,0.008
c-0.018,0.002-0.035,0.005-0.053,0.006c-0.014,0.001-0.027,0-0.041,0c-0.018,0.001-0.034,0.001-0.051,0
c-0.015-0.002-0.028-0.003-0.043-0.005C7.895,11.956,7.878,11.954,7.861,11.95z”/>
</svg>
***********************************************************

Where is the code in this ?

Thanks in advanced.

Ho Bettina,

Thanks for your efforts, but it’s still not working.

I input the code as you recommended : https://www.screencast.com/t/8d5B51eUd6I.

But the arrows (svg icons) are not displaying https://www.screencast.com/t/FZqYoVjLJ, I have interogation marks instead.

To come back to the beginning, this is my code :

.arrow-bottom {
background: url(PATH_TO/arrow-bottom.svg) center center no-repeat;
}

I uploaded the icons svg in public_html/wp-content/themes/Newspaper/images/icons.

What value shall I replace PATH_TO ?

Thanks in advanced.

This still not working.