We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. Metro Studio
  4. Unsupported Icon when Generating Font for Web

Unsupported Icon when Generating Font for Web

Greetings,

In MetroStudio there is the "Character" category that allows you to create an icon from virtually any font and character.  However, it seems that these are not supported when you want to generate a font file for web use.

Case in point, select any Webdings Font character and drag it to your project.  Then choose "Create Font" and the character always gets placed under "Unsupported Icon".

Is this a known limitation or can this be fixed/changed to be used in the generated font?

P.S.  Great product by the way!

Attachment: screenshot_2cb528c9.zip

7 Replies
PB Priyanga Balasubramaniam Syncfusion Team March 10, 2017 12:35 PM UTC

Hi Roger,

Thank you for contact us regarding Metro Studio.

In our current implementation, there is no support to create font using icons from the Character category. We will consider this feature in any of our upcoming release.

Regards,
Priyanga B


RM Roger Miller March 12, 2017 09:01 PM UTC

Sorry to here that it is a limitation.  Hopefully that feature will make it into the next version.

With that, I see that the .metrop file is simply an XML file.  One could easily add another ICON node, but what is the DATA and DATAFONT attributes format?  What do all these numbers represent?  Can I produce an image from another program and export that to a specific format and get this data?  If so, can I use to produce this so I can create my own images?


  <Icon Name="transport" HasCharacterMap="false" FontName="transport" IsDuplicate="false" ASCIIValue="e7cb" AlphaNumericValue="" FiValue="transport" GroupName="Shopping" IsDirty="false" ExportCommand="MetroGraphicsPackage.IconCommand" Data="M25,16C23.896973,16 23,16.896973 23,18 23,19.103027 23.896973,20 25,20 26.103027,20 27,19.103027 27,18 27,16.896973 26.103027,16 25,16z M9,16C7.8970003,16 7,16.897 7,18 7,19.103 7.8970003,20 9,20 10.103,20 11,19.103 11,18 11,16.897 10.103,16 9,16z M10,10L15,10 15,12 10,12z M21,7L26,7 26,9 21,9z M7,7L15,7 15,9 7,9z M19,4L19,16 21.537939,16 21.579811,15.927251C22.282034,14.772614 23.552277,14 25,14 26.447723,14 27.717966,14.772614 28.420189,15.927251L28.462061,16 30,16 30,10.15 25.037,4z M4,4L15,4 15,6 4,6z M2,2L2,16 5.5379486,16 5.5798235,15.927248C6.2820587,14.772611 7.5523119,14 9,14 10.447688,14 11.717941,14.772611 12.420177,15.927248L12.462051,16 17,16 17,2z M0,0L19,0 19,2 25.994,2 32,9.4429998 32,18 29,18C29,20.205994 27.206055,22 25,22 22.793945,22 21,20.205994 21,18L19,18 13,18C13,20.206 11.206,22 9,22 6.7939997,22 5,20.206 5,18L0,18z" DataFont="M846.3,283.8C846.3,249.3 818.3,221.3 783.8,221.3 749.3,221.3 721.3,249.3 721.3,283.8 721.3,318.3 749.3,346.3 783.8,346.3 818.3,346.3 846.3,318.2 846.3,283.8z M346.3,283.8C346.3,249.3 318.3,221.3 283.8,221.3 249.3,221.3 221.3,249.3 221.3,283.8 221.3,318.3 249.3,346.3 283.8,346.3 318.3,346.3 346.3,318.2 346.3,283.8z M315,471.3L471.3,471.3 471.3,533.8 315,533.8 315,471.3z M658.8,565L815,565 815,627.5 658.8,627.5 658.8,565z M221.3,565L471.3,565 471.3,627.5 221.3,627.5 221.3,565z M784.9,721.3L940,529.1 940,346.3 891.9,346.3 890.6,348.6C868.7,384.7 829,408.8 783.7,408.8 738.4,408.8 698.8,384.7 676.8,348.6L675.5,346.3 596.2,346.3 596.2,721.3 784.9,721.3z M127.5,658.8L471.3,658.8 471.3,721.3 127.5,721.3 127.5,658.8z M533.8,783.8L533.8,346.3 391.9,346.3 390.6,348.6C368.7,384.7 329,408.8 283.7,408.8 238.4,408.8 198.8,384.7 176.8,348.6L175.5,346.3 65,346.3 65,783.8 533.8,783.8z M2.5,283.8L158.8,283.8C158.8,214.9 214.9,158.8 283.8,158.8 352.7,158.8 408.8,214.9 408.8,283.8L596.3,283.8 658.8,283.8C658.8,214.9 714.9,158.8 783.8,158.8 852.7,158.8 908.8,214.9 908.8,283.8L1002.6,283.8 1002.6,551.2 814.8,783.8 596.3,783.8 596.3,846.3 2.5,846.3 2.5,283.8z">
    <Settings FontFamily="Webdings" Character="&gt;" IconBrush="#FFFFFFFF" FlipCommand="MetroGraphicsPackage.IconCommand" SldierValueChanged="MetroGraphicsPackage.IconCommand" FlipX="1" FlipY="1" IsLinked="false" ContentHeight="26" ContentWidth="26" SizeIndex="4" MainWidth="48" Angle="0" MainHeight="48" CustomSize="48" MaximumPadding="15" BackgroundBrush="#FF000000" IconShape="Square" IsBackgroundVisible="true" IsRect="false" CustomWidth="48" CustomHeight="48" Padding="11" />
  </Icon>

PB Priyanga Balasubramaniam Syncfusion Team March 13, 2017 12:27 PM UTC

Hi Roger,

While saving the project, we have saved the project as ".metrop" file. This file contains collection of Icon tags which represents each icon. Each icon has Data and DataFont value. Data represents Path data of selected icon and DataFont represents data for the FontIcon. Using this Data value, we have reloaded icon while opening the existing project. 

To know more details about "Data" please refer the below link. 

Link: https://msdn.microsoft.com/fr-fr/library/system.windows.shapes.path.data(v=vs.95).aspx   

If you have path Data value for your icon you can replace the Data and DataFont value of existing icon and get your own image by opening the customized ".metrop" file using Metro Studio.

Regards, 
Priyanga B

RM Roger Miller March 20, 2017 08:23 PM UTC

Priyanga,

I have followed the instructions you have provided with almost 100% success.  I've been able to produce a .metrop file from SVG images and when I choose "Generate Font", I have a good preview of what the export will produce.

However, after I generate the font and Metro Studio produces the demo.html sample, upon viewing it in a browser I see the same image for all characters.  Not sure what I might have missed, or what may be wrong.

I have attached before and after screen shots, as well as the .metrop I used and the exported demo. Please note that I used the open source InkScape application to produce the XAML geometry and then pasted that data into the data attribute of the tag.

Please advise.


Attachment: roger_demo_font_71f57878.zip


UPDATE - I now notice that in the .metrop file that the "Data" and "DataFont" attributes are different.  My process only changed the "Data" attribute.  Now my question is, what should the value of DataFont be so that it generates the font?  I have tried setting it to the same value as "Data", but that does not work.  How does "Data" differ from "DataFont" and what does Syncfusion use to produce these values?


PB Priyanga Balasubramaniam Syncfusion Team March 21, 2017 12:43 PM UTC

Hi Roger,

We have created DataFont value for each icon internally to customize the icons. Also, based on these values we have created the Font. If you want to create font with your own icons, can you please update us what icons you are expecting. We will add those icons in our MetroStudio and you can create font from those icons.

You can request for new icons through the below link.

Link: https://www.syncfusion.com/downloads/metrostudio#request-icons  

Regards,
Priyanga B

RM Roger Miller March 22, 2017 11:32 AM UTC

Based on your response here, should there be a file attachment I should be able to download.  Where do I find my icon set along with the DataFont values that you have created?  Shouldn't there be a .metrop file here, or did you include them a new revision of Metro Studio?

PB Priyanga Balasubramaniam Syncfusion Team March 23, 2017 07:06 AM UTC

Hi Roger,

Sorry for the misunderstanding.

In our last update, we have requested you to share the icon details which you need through the below link.

Also, please let us know whether you need to create the Font using the icons under "Character" category or else you need to create Font with your own icons?

If you need icon from "Character" category, please list out the icons which you need. After that we will create those icons and add it as Wireframe or FlatIcons. Using this you can create your own font with this newly created icons.

link: https://www.syncfusion.com/downloads/metrostudio#request-icons  

Regards, 
Priyanga B
 


Loader.
Live Chat Icon For mobile
Up arrow icon