hi - trouble changing icon size and color

[anahit...@gocanvas.com]

Hi,

I uploaded my own set of 24 SVG to icomoon yesterday and then downloaded the entire file. Put the SVG and symbol-defs.svg in the images folder, the sprite.css and style.css within my stylesheets, the svgxuse.js in the JS folder (not sure what to do with the selection.json file and where to put that). I am adding external svg to each div (I have copied/pasted the code below).

<div class="box_link">

    <a href="#" data-wait="Please wait while we create the template for you">

          <svg class="icn icn-CreateTemplate"><use xlink:href="#icn-CreateTemplate"/></svg>

          <span class="btnb medium_110 blu">Create Template</span>

    </a>

</div>

(code below is what is in style.css from the download folder)

.icn {

display: inline-block;

width: 1em;

height: 1em;

fill: currentColor;

background-color: #fff;

}

(code below is what is from sprite.css from the download folder)

.icn {

    display: inline-block;

    background-repeat: no-repeat;

    background-image: url('sprites/sprite.svg');

    background-color: #fff;

}

.icn-CreateTemplate {

    width: 45px;

    height: 45px;

    background-position: -305px 0;

}

Here is my issue. When I download my set and the download option gives me the demo file, I am able to change the size of the icon within firebug and the color. However, when I put the file it gives me within my application, I am restricted to the size I set the image at when I downloaded it. There is always a default size. 

Can someone please let me know what I am missing or what I am doing wrong, that is not allowing me to change the size of the icons on the fly?

Thank you for your help in advance. I hope to get this resolved asap. 

[Keyamoon]

Why would you add both the symbol-defs.svg file and the sprite.css file? They are different methods of using SVGs for icons.

Refer to the generated read me file or the docs for more info: https://icomoon.io/#docs/inline-svg

[anahit...@gocanvas.com]

I was under the impression that I needed both of them.

I removed the sprite.css and it didn't work. Did you mean sprite.svg rather than sprite.css?

[Keyamoon]

Again, sprites and inline SVGs are different methods of implementing an SVG icon system. I would recommend inline SVGs. You probably checked the tiles checkbox in the Preferences panel. If you uncheck it, those sprite files won't be generated in the first place. To learn how to use inline SVGs, see this part of the docs: https://icomoon.io/#docs/inline-svg

If you still couldn't figure out what's causing the issue you're having, provide a reduced test case.

[Keyamoon]

You might also find this CodePen example and the comments I just added to its CSS helpful: http://codepen.io/Keyamoon/pen/vEXLQX

You may need to scroll down in the CSS section in order to see the comments.