I am trying to import a custom .png file

alwyna...@gmail.com

unread,

Oct 26, 2015, 11:35:01 AM10/26/15

to IcoMoon

I am getting this error message in trying to do so.

Please choose SVG images, SVG fonts or JSONs exported by IcoMoon.

Please advice how I can import correctly.

Thanks, Al

Keyamoon

unread,

Oct 26, 2015, 12:17:01 PM10/26/15

to IcoMoon

As the error messages says, you need SVGs. PNGs cannot be imported. PNGs are not vector based.

Keyamoon

unread,

Oct 26, 2015, 12:21:06 PM10/26/15

to IcoMoon

Also, note that placing a PNG or bitmap image inside an SVG does not make it vector. There is no way of converting PNGs to SVGs other than manually drawing vectors.

alwyna...@gmail.com

unread,

Oct 26, 2015, 12:40:07 PM10/26/15

to IcoMoon

Thank you. I created the SVG now and have it in my selected set. It does not show up on the page though. Is there and stipulations on the name given? I simply named it "l2"

Keyamoon

unread,

Oct 26, 2015, 12:41:40 PM10/26/15

to IcoMoon

What page? Does it appear in the generated "demo.html"?

alwyna...@gmail.com

unread,

Oct 26, 2015, 2:25:16 PM10/26/15

to IcoMoon

I probably did not save something correctly.
I am not sure where to find demo.html

Keyamoon

unread,

Oct 26, 2015, 2:26:39 PM10/26/15

to IcoMoon

Press download at the bottom of the page. Or press "view on codepen" in the quick usage area.

alwyna...@gmail.com

unread,

Oct 26, 2015, 2:57:35 PM10/26/15

to IcoMoon

<header class="bgc1 clearfix">
<p class="mhl">SVG Icons - Generated by <a href="https://icomoon.io/app">IcoMoon</a></p>
</header>
<div class="clearfix mhl ptl">
<h1 class="mvm mtn fgc1">Grid Size: 16</h1>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-l2">
<use xlink:href="#icon-l2"></use>
</svg><span class="mls"> icon-l2</span>
</div>
</div>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-L2">
<use xlink:href="#icon-L2"></use>
</svg><span class="mls"> icon-L2</span>
</div>
</div>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-stack">
<use xlink:href="#icon-stack"></use>
</svg><span class="mls"> icon-stack</span>
</div>
</div>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-database">
<use xlink:href="#icon-database"></use>
</svg><span class="mls"> icon-database</span>
</div>
</div>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-enlarge">
<use xlink:href="#icon-enlarge"></use>
</svg><span class="mls"> icon-enlarge</span>
</div>
</div>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-stats-bars">
<use xlink:href="#icon-stats-bars"></use>
</svg><span class="mls"> icon-stats-bars</span>
</div>
</div>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-equalizer">
<use xlink:href="#icon-equalizer"></use>
</svg><span class="mls"> icon-equalizer</span>
</div>
</div>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-meter">
<use xlink:href="#icon-meter"></use>
</svg><span class="mls"> icon-meter</span>
</div>
</div>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-upload3">
<use xlink:href="#icon-upload3"></use>
</svg><span class="mls"> icon-upload3</span>
</div>
</div>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-sun">
<use xlink:href="#icon-sun"></use>
</svg><span class="mls"> icon-sun</span>
</div>
</div>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-shuffle">
<use xlink:href="#icon-shuffle"></use>
</svg><span class="mls"> icon-shuffle</span>
</div>
</div>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-arrow-up-right">
<use xlink:href="#icon-arrow-up-right"></use>
</svg><span class="mls"> icon-arrow-up-right</span>
</div>
</div>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-paragraph-left">
<use xlink:href="#icon-paragraph-left"></use>
</svg><span class="mls"> icon-paragraph-left</span>
</div>
</div>
</div>

Keyamoon

unread,

Oct 26, 2015, 3:59:20 PM10/26/15

to IcoMoon

Do you see the icons in the demo.html when you open it?

alwyna...@gmail.com

unread,

Oct 26, 2015, 4:23:27 PM10/26/15

to IcoMoon

Yes they show up on the demo.html

Keyamoon

unread,

Oct 26, 2015, 4:39:56 PM10/26/15

to IcoMoon

In that case, if you follow the same code in the demo.html and style.css, and make sure the code in style.css points to the right path, your icons should show up as well.

Reply all

Reply to author

Forward