I am trying to import a custom .png file

293 views
Skip to first unread message

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
<link rel="stylesheet" href="https://i.icomoon.io/public/temp/564fde446b/UntitledProject/style-svg.css">
<script src="https://i.icomoon.io/public/temp/564fde446b/UntitledProject/svgembedder.js"></script>

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
<!-- Add the following references to the <head> of your HTML.
For development purposes only. Do not use in Production. -->

<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
0 new messages