Tiles (CSS Sprite) - some icons overlap in single column sprite sheet (sprite.svg)

28 views
Skip to first unread message

scoe...@lsscm.org

unread,
Mar 13, 2017, 12:31:42 PM3/13/17
to IcoMoon
When I create a single column sprite sheet using Tiles (CSS Sprite) the resulting files has random overlapping icons. When I look at the resulting the files, the y coordinate is actually the same for a couple of different icons:

<svg id="icon-money" width="19" height="16" viewBox="0 0 19 16" x="0" y="1368">

<svg id="icon-police" width="16" height="16" viewBox="0 0 16 16" x="0" y="1368">

What am I doing wrong?

Thanks,
Scott

Keyamoon

unread,
Mar 13, 2017, 1:27:46 PM3/13/17
to IcoMoon
Could you please your project file? That would help reproduce the problem.

scoe...@lsscm.org

unread,
Mar 13, 2017, 1:43:25 PM3/13/17
to IcoMoon
Below is the selection.json file if that's what you mean. As a test I just picked the first 20 icomoon free icons and put them into a single column sprite sheet (sprite.svg) and two of them overlap.

Thanks for your help.

{
"IcoMoonType": "selection",
"icons": [
{
"icon": {
"paths": [
"M1024 590.444l-512-397.426-512 397.428v-162.038l512-397.426 512 397.428zM896 576v384h-256v-256h-256v256h-256v-384l384-288z"
],
"tags": [
"home",
"house"
],
"defaultCode": 59648,
"grid": 16,
"attrs": []
},
"attrs": [],
"properties": {
"ligatures": "home, house",
"name": "home",
"order": 2,
"id": 1,
"prevSize": 32
},
"setIdx": 0,
"setId": 1,
"iconIdx": 0
},
{
"icon": {
"paths": [
"M512 32l-512 512 96 96 96-96v416h256v-192h128v192h256v-416l96 96 96-96-512-512zM512 448c-35.346 0-64-28.654-64-64s28.654-64 64-64c35.346 0 64 28.654 64 64s-28.654 64-64 64z"
],
"tags": [
"home",
"house"
],
"defaultCode": 59649,
"grid": 16,
"attrs": []
},
"attrs": [],
"properties": {
"ligatures": "home2, house2",
"name": "home2",
"order": 3,
"id": 2,
"prevSize": 32
},
"setIdx": 0,
"setId": 1,
"iconIdx": 1
},
{
"icon": {
"paths": [
"M1024 608l-192-192v-288h-128v160l-192-192-512 512v32h128v320h320v-192h128v192h320v-320h128z"
],
"tags": [
"home",
"house"
],
"defaultCode": 59650,
"grid": 16,
"attrs": []
},
"attrs": [],
"properties": {
"ligatures": "home3, house3",
"name": "home3",
"order": 4,
"id": 3,
"prevSize": 32
},
"setIdx": 0,
"setId": 1,
"iconIdx": 2
},
{
"icon": {
"paths": [
"M0 1024h512v-1024h-512v1024zM320 128h128v128h-128v-128zM320 384h128v128h-128v-128zM320 640h128v128h-128v-128zM64 128h128v128h-128v-128zM64 384h128v128h-128v-128zM64 640h128v128h-128v-128zM576 320h448v64h-448zM576 1024h128v-256h192v256h128v-576h-448z"
],
"tags": [
"office",
"buildings",
"work"
],
"defaultCode": 59651,
"grid": 16,
"attrs": []
},
"attrs": [],
"properties": {
"ligatures": "office, buildings",
"name": "office",
"order": 5,
"id": 4,
"prevSize": 32
},
"setIdx": 0,
"setId": 1,
"iconIdx": 3
},
{
"icon": {
"paths": [
"M896 256v-128h-896v704c0 35.346 28.654 64 64 64h864c53.022 0 96-42.978 96-96v-544h-128zM832 832h-768v-640h768v640zM128 320h640v64h-640zM512 448h256v64h-256zM512 576h256v64h-256zM512 704h192v64h-192zM128 448h320v320h-320z"
],
"tags": [
"newspaper",
"news",
"paper"
],
"defaultCode": 59652,
"grid": 16,
"attrs": []
},
"attrs": [],
"properties": {
"ligatures": "newspaper, news",
"name": "newspaper",
"order": 6,
"id": 5,
"prevSize": 32
},
"setIdx": 0,
"setId": 1,
"iconIdx": 4
},
{
"icon": {
"paths": [
"M864 0c88.364 0 160 71.634 160 160 0 36.020-11.91 69.258-32 96l-64 64-224-224 64-64c26.742-20.090 59.978-32 96-32zM64 736l-64 288 288-64 592-592-224-224-592 592zM715.578 363.578l-448 448-55.156-55.156 448-448 55.156 55.156z"
],
"tags": [
"pencil",
"write",
"edit"
],
"defaultCode": 59653,
"grid": 16,
"attrs": []
},
"attrs": [],
"properties": {
"ligatures": "pencil, write",
"name": "pencil",
"order": 7,
"id": 6,
"prevSize": 32
},
"setIdx": 0,
"setId": 1,
"iconIdx": 5
},
{
"icon": {
"paths": [
"M384 640l128-64 448-448-64-64-448 448-64 128zM289.3 867.098c-31.632-66.728-65.666-100.762-132.396-132.394l99.096-272.792 128-77.912 384-384h-192l-384 384-192 640 640-192 384-384v-192l-384 384-77.912 128z"
],
"tags": [
"pencil",
"write",
"edit"
],
"defaultCode": 59654,
"grid": 16,
"attrs": []
},
"attrs": [],
"properties": {
"ligatures": "pencil2, write2",
"name": "pencil2",
"order": 9,
"id": 7,
"prevSize": 32
},
"setIdx": 0,
"setId": 1,
"iconIdx": 6
},
{
"icon": {
"paths": [
"M0 1024c128-384 463-1024 1024-1024-263 211-384 704-576 704s-192 0-192 0l-192 320h-64z"
],
"tags": [
"quill",
"feather",
"write",
"edit"
],
"defaultCode": 59655,
"grid": 16,
"attrs": []
},
"attrs": [],
"properties": {
"ligatures": "quill, feather",
"name": "quill",
"order": 8,
"id": 8,
"prevSize": 32
},
"setIdx": 0,
"setId": 1,
"iconIdx": 7
},
{
"icon": {
"paths": [
"M1018.17 291.89l-286.058-286.058c-9.334-9.334-21.644-7.234-27.356 4.666l-38.354 79.904 267.198 267.198 79.904-38.354c11.9-5.712 14-18.022 4.666-27.356z",
"M615.384 135.384l-263.384 21.95c-17.5 2.166-32.080 5.898-37.090 28.752-0.006 0.024-0.012 0.042-0.018 0.066-71.422 343.070-314.892 677.848-314.892 677.848l57.374 57.374 271.986-271.99c-5.996-12.53-9.36-26.564-9.36-41.384 0-53.020 42.98-96 96-96s96 42.98 96 96-42.98 96-96 96c-14.82 0-28.852-3.364-41.384-9.36l-271.988 271.986 57.372 57.374c0 0 334.778-243.47 677.848-314.892 0.024-0.006 0.042-0.012 0.066-0.018 22.854-5.010 26.586-19.59 28.752-37.090l21.95-263.384-273.232-273.232z"
],
"tags": [
"pen",
"write",
"edit"
],
"defaultCode": 59656,
"grid": 16,
"attrs": []
},
"attrs": [],
"properties": {
"ligatures": "pen, write3",
"name": "pen",
"order": 10,
"id": 9,
"prevSize": 32
},
"setIdx": 0,
"setId": 1,
"iconIdx": 8
},
{
"icon": {
"paths": [
"M384 0v96c73.482 0 144.712 14.37 211.716 42.71 64.768 27.394 122.958 66.632 172.948 116.624s89.228 108.18 116.624 172.948c28.342 67.004 42.712 138.238 42.712 211.718h96c0-353.46-286.54-640-640-640z",
"M384 192v96c94.022 0 182.418 36.614 248.9 103.098 66.486 66.484 103.1 154.878 103.1 248.902h96c0-247.422-200.576-448-448-448z",
"M480 384l-64 64-224 64-192 416 25.374 25.374 232.804-232.804c-1.412-5.286-2.178-10.84-2.178-16.57 0-35.346 28.654-64 64-64s64 28.654 64 64-28.654 64-64 64c-5.732 0-11.282-0.764-16.568-2.178l-232.804 232.804 25.372 25.374 416-192 64-224 64-64-160-160z"
],
"tags": [
"blog",
"pen",
"feed",
"publish",
"broadcast",
"write"
],
"defaultCode": 59657,
"grid": 16,
"attrs": []
},
"attrs": [],
"properties": {
"ligatures": "blog, pen2",
"name": "blog",
"order": 11,
"id": 10,
"prevSize": 32
},
"setIdx": 0,
"setId": 1,
"iconIdx": 9
},
{
"icon": {
"paths": [
"M986.51 37.49c-49.988-49.986-131.032-49.986-181.020 0l-172.118 172.118-121.372-121.372-135.764 135.764 106.426 106.426-472.118 472.118c-8.048 8.048-11.468 18.958-10.3 29.456h-0.244v160c0 17.674 14.328 32 32 32h160c0 0 2.664 0 4 0 9.212 0 18.426-3.516 25.456-10.544l472.118-472.118 106.426 106.426 135.764-135.764-121.372-121.372 172.118-172.118c49.986-49.988 49.986-131.032 0-181.020zM173.090 960h-109.090v-109.090l469.574-469.572 109.088 109.088-469.572 469.574z"
],
"tags": [
"eyedropper",
"color",
"color-picker",
"sample"
],
"defaultCode": 59658,
"grid": 16,
"attrs": []
},
"attrs": [],
"properties": {
"ligatures": "eyedropper, color",
"name": "eyedropper",
"order": 12,
"id": 11,
"prevSize": 32
},
"setIdx": 0,
"setId": 1,
"iconIdx": 10
},
{
"icon": {
"paths": [
"M864.626 473.162c-65.754-183.44-205.11-348.15-352.626-473.162-147.516 125.012-286.87 289.722-352.626 473.162-40.664 113.436-44.682 236.562 12.584 345.4 65.846 125.14 198.632 205.438 340.042 205.438s274.196-80.298 340.040-205.44c57.27-108.838 53.25-231.962 12.586-345.398zM738.764 758.956c-43.802 83.252-132.812 137.044-226.764 137.044-55.12 0-108.524-18.536-152.112-50.652 13.242 1.724 26.632 2.652 40.112 2.652 117.426 0 228.668-67.214 283.402-171.242 44.878-85.292 40.978-173.848 23.882-244.338 14.558 28.15 26.906 56.198 36.848 83.932 22.606 63.062 40.024 156.34-5.368 242.604z"
],
"tags": [
"droplet",
"color",
"water"
],
"defaultCode": 59659,
"grid": 16,
"attrs": []
},
"attrs": [],
"properties": {
"ligatures": "droplet, color2",
"name": "droplet",
"order": 13,
"id": 12,
"prevSize": 32
},
"setIdx": 0,
"setId": 1,
"iconIdx": 11
},
{
"icon": {
"paths": [
"M1024 576v-384h-192v-64c0-35.2-28.8-64-64-64h-704c-35.2 0-64 28.8-64 64v192c0 35.2 28.8 64 64 64h704c35.2 0 64-28.8 64-64v-64h128v256h-576v128h-32c-17.674 0-32 14.326-32 32v320c0 17.674 14.326 32 32 32h128c17.674 0 32-14.326 32-32v-320c0-17.674-14.326-32-32-32h-32v-64h576zM768 192h-704v-64h704v64z"
],
"tags": [
"paint-format",
"format",
"color"
],
"defaultCode": 59660,
"grid": 16,
"attrs": []
},
"attrs": [],
"properties": {
"ligatures": "paint-format, format",
"name": "paint-format",
"order": 14,
"id": 13,
"prevSize": 32
},
"setIdx": 0,
"setId": 1,
"iconIdx": 12
},
{
"icon": {
"paths": [
"M959.884 128c0.040 0.034 0.082 0.076 0.116 0.116v767.77c-0.034 0.040-0.076 0.082-0.116 0.116h-895.77c-0.040-0.034-0.082-0.076-0.114-0.116v-767.772c0.034-0.040 0.076-0.082 0.114-0.114h895.77zM960 64h-896c-35.2 0-64 28.8-64 64v768c0 35.2 28.8 64 64 64h896c35.2 0 64-28.8 64-64v-768c0-35.2-28.8-64-64-64v0z",
"M832 288c0 53.020-42.98 96-96 96s-96-42.98-96-96 42.98-96 96-96 96 42.98 96 96z",
"M896 832h-768v-128l224-384 256 320h64l224-192z"
],
"tags": [
"image",
"picture",
"photo",
"graphic"
],
"defaultCode": 59661,
"grid": 16,
"attrs": []
},
"attrs": [],
"properties": {
"ligatures": "image, picture",
"name": "image",
"order": 15,
"id": 14,
"prevSize": 32
},
"setIdx": 0,
"setId": 1,
"iconIdx": 13
},
{
"icon": {
"width": 1152,
"paths": [
"M1088 128h-64v-64c0-35.2-28.8-64-64-64h-896c-35.2 0-64 28.8-64 64v768c0 35.2 28.8 64 64 64h64v64c0 35.2 28.8 64 64 64h896c35.2 0 64-28.8 64-64v-768c0-35.2-28.8-64-64-64zM128 192v640h-63.886c-0.040-0.034-0.082-0.076-0.114-0.116v-767.77c0.034-0.040 0.076-0.082 0.114-0.114h895.77c0.040 0.034 0.082 0.076 0.116 0.116v63.884h-768c-35.2 0-64 28.8-64 64v0zM1088 959.884c-0.034 0.040-0.076 0.082-0.116 0.116h-895.77c-0.040-0.034-0.082-0.076-0.114-0.116v-767.77c0.034-0.040 0.076-0.082 0.114-0.114h895.77c0.040 0.034 0.082 0.076 0.116 0.116v767.768z",
"M960 352c0 53.020-42.98 96-96 96s-96-42.98-96-96 42.98-96 96-96 96 42.98 96 96z",
"M1024 896h-768v-128l224-384 256 320h64l224-192z"
],
"tags": [
"images",
"pictures",
"photos",
"graphics"
],
"defaultCode": 59662,
"grid": 16,
"attrs": []
},
"attrs": [],
"properties": {
"ligatures": "images, pictures",
"name": "images",
"order": 16,
"id": 15,
"prevSize": 32
},
"setIdx": 0,
"setId": 1,
"iconIdx": 14
},
{
"icon": {
"paths": [
"M304 608c0 114.876 93.124 208 208 208s208-93.124 208-208-93.124-208-208-208-208 93.124-208 208zM960 256h-224c-16-64-32-128-96-128h-256c-64 0-80 64-96 128h-224c-35.2 0-64 28.8-64 64v576c0 35.2 28.8 64 64 64h896c35.2 0 64-28.8 64-64v-576c0-35.2-28.8-64-64-64zM512 892c-156.85 0-284-127.148-284-284 0-156.85 127.15-284 284-284 156.852 0 284 127.15 284 284 0 156.852-127.146 284-284 284zM960 448h-128v-64h128v64z"
],
"tags": [
"camera",
"photo",
"picture",
"image"
],
"defaultCode": 59663,
"grid": 16,
"attrs": []
},
"attrs": [],
"properties": {
"ligatures": "camera, photo",
"name": "camera",
"order": 17,
"id": 16,
"prevSize": 32
},
"setIdx": 0,
"setId": 1,
"iconIdx": 15
},
{
"icon": {
"paths": [
"M288 576h-64v448h64c17.6 0 32-14.4 32-32v-384c0-17.6-14.4-32-32-32z",
"M736 576c-17.602 0-32 14.4-32 32v384c0 17.6 14.398 32 32 32h64v-448h-64z",
"M1024 512c0-282.77-229.23-512-512-512s-512 229.23-512 512c0 61.412 10.83 120.29 30.656 174.848-19.478 33.206-30.656 71.87-30.656 113.152 0 112.846 83.448 206.188 192 221.716v-443.418c-31.914 4.566-61.664 15.842-87.754 32.378-5.392-26.718-8.246-54.364-8.246-82.676 0-229.75 186.25-416 416-416s416 186.25 416 416c0 28.314-2.83 55.968-8.22 82.696-26.1-16.546-55.854-27.848-87.78-32.418v443.44c108.548-15.532 192-108.874 192-221.714 0-41.274-11.178-79.934-30.648-113.138 19.828-54.566 30.648-113.452 30.648-174.866z"
],
"tags": [
"headphones",
"headset",
"music",
"audio"
],
"defaultCode": 59664,
"grid": 16,
"attrs": []
},
"attrs": [],
"properties": {
"ligatures": "headphones, headset",
"name": "headphones",
"order": 18,
"id": 17,
"prevSize": 32
},
"setIdx": 0,
"setId": 1,
"iconIdx": 16
},
{
"icon": {
"paths": [
"M960 0h64v736c0 88.366-100.29 160-224 160s-224-71.634-224-160c0-88.368 100.29-160 224-160 62.684 0 119.342 18.4 160 48.040v-368.040l-512 113.778v494.222c0 88.366-100.288 160-224 160s-224-71.634-224-160c0-88.368 100.288-160 224-160 62.684 0 119.342 18.4 160 48.040v-624.040l576-128z"
],
"tags": [
"music",
"song",
"audio",
"sound",
"note"
],
"defaultCode": 59665,
"grid": 16,
"attrs": []
},
"attrs": [],
"properties": {
"ligatures": "music, song",
"name": "music",
"order": 19,
"id": 18,
"prevSize": 32
},
"setIdx": 0,
"setId": 1,
"iconIdx": 17
},
{
"icon": {
"paths": [
"M981.188 160.108c-143.632-20.65-302.332-32.108-469.186-32.108-166.86 0-325.556 11.458-469.194 32.108-27.53 107.726-42.808 226.75-42.808 351.892 0 125.14 15.278 244.166 42.808 351.89 143.638 20.652 302.336 32.11 469.194 32.11 166.854 0 325.552-11.458 469.186-32.11 27.532-107.724 42.812-226.75 42.812-351.89 0-125.142-15.28-244.166-42.812-351.892zM384.002 704v-384l320 192-320 192z"
],
"tags": [
"play",
"video",
"movie"
],
"defaultCode": 59666,
"grid": 16,
"attrs": []
},
"attrs": [],
"properties": {
"ligatures": "play, video",
"name": "play",
"order": 20,
"id": 19,
"prevSize": 32
},
"setIdx": 0,
"setId": 1,
"iconIdx": 18
},
{
"icon": {
"paths": [
"M0 128v768h1024v-768h-1024zM192 832h-128v-128h128v128zM192 576h-128v-128h128v128zM192 320h-128v-128h128v128zM768 832h-512v-640h512v640zM960 832h-128v-128h128v128zM960 576h-128v-128h128v128zM960 320h-128v-128h128v128zM384 320v384l256-192z"
],
"tags": [
"film",
"video",
"movie",
"tape",
"play"
],
"defaultCode": 59667,
"grid": 16,
"attrs": []
},
"attrs": [],
"properties": {
"ligatures": "film, video2",
"name": "film",
"order": 23,
"id": 20,
"prevSize": 32
},
"setIdx": 0,
"setId": 1,
"iconIdx": 19
}
],
"height": 1024,
"preferences": {
"showGlyphs": true,
"showQuickUse": true,
"showQuickUse2": true,
"showSVGs": true,
"fontPref": {
"prefix": "icon-",
"metadata": {
"fontFamily": "icomoon"
},
"metrics": {
"emSize": 1024,
"baseline": 6.25,
"whitespace": 50
},
"embed": false
},
"imagePref": {
"prefix": "icon-",
"png": false,
"useClassSelector": true,
"color": 0,
"bgColor": 16777215,
"classSelector": ".icon",
"height": 32,
"columns": 1,
"margin": 16,
"sprite": true
},
"historySize": 100,
"showCodes": true,
"gridSize": 16
}
}

Keyamoon

unread,
Mar 13, 2017, 1:45:43 PM3/13/17
to IcoMoon
Thank you. I was able to reproduce the issue. Will get back to you when there's a fix.

Keyamoon

unread,
Mar 13, 2017, 8:15:51 PM3/13/17
to IcoMoon
This issue has been fixed now. Thank you for reporting it. Please refresh the app and try again.

scoe...@lsscm.org

unread,
Mar 14, 2017, 10:15:24 AM3/14/17
to IcoMoon
Thank you! It seems to be working perfectly.
Reply all
Reply to author
Forward
0 new messages