keremciu / sketch-iconfont

This plugin helps you easily insert and manage icons from icon fonts.
1.97k stars 102 forks source link

only seeing some FA Pro icons after update to 4.7 #170

Open dylanmcleod opened 5 years ago

dylanmcleod commented 5 years ago

Hi,

I can't seem to get the FA Pro fonts to work properly since updating to 4.7. After updating, I went to add an icon and all the fonts I'd installed were missing.

I've followed the steps as listed here which previously worked with the pro icon set.

I seem to be able to pull through some of the icons for each weight as shown here but am still missing a lot of the icons in the SVG fonts.

Thanks.

keremciu commented 5 years ago

hello @dylanmcleod

I didn't change anything related to fonts in 4.7 but can you describe me more about your case right now? cause it looks like you need to install your ttf or otf file again, I'm preparing 4.8 for font-awesome pro icon support then you don't need to change font names but yes this is not related to don't show some icons properly

Cheers,

adamkool commented 5 years ago

@keremciu I have the exact same problem. I see the exact same limited icon set as @dylanmcleod posted.

dylanmcleod commented 5 years ago

i've tried activating both TTF and OTF font files and get the same issue, should it be one or the other or are both fine to use? your video which shows how to install the font bundle shows you installing an OTF font, but the video that shows how to install pro icons shows TTF...

i've now uninstalled the plugin, reinstalled with the original font bundle (which works, but with some missing icons), updated the SVG fonts as per your video, installed them via the plugin and tried activating both OTF and TTF fonts to no avail...

keremciu commented 5 years ago

@dylanmcleod ttf or otf there's no big difference between them in this case. I will gonna try to uninstall everything and install again maybe I could reproduce this case then I will write here

mamuts12 commented 5 years ago

Font-Awesome-5.zip

Had the same issue with font awesome 5 not all icons were appearing after looking for solutions found one at http://fontello.com/ by using font awesome 5 given svg's and creating a new ttf file from the site.

Simply drag the given svgs from free or pro version into the website, name the font and download. Works with all svg's.

Once unzipping the folder download created ttf to you're font book and import the font with the svg. All icons should appear at the end.

Attached Working Font Awesome 5 Free icon set that contains all versions Brand+Solid+Regular.

frankparadiso commented 5 years ago

Hey @keremciu, same for me. After I've updated the plugin, I lost ALL THE FONT.

BTW, thank you for your work. ❤️

keremciu commented 5 years ago

@mamuts12 thank you so much for sharing, I think I'm gonna put free font-awesome 5 files into main-font-bundle to help people cause many people are trying to use them and having problems.

@frankparadiso sorry to hear that, I wrote this one into readme file:

⚠️ BEFORE UPDATE: If you're using custom icon fonts, please export your font bundle like this: VIDEO then update the plugin, you can install the your custom-font-bundle without losing your custom fonts.

but of course this plugin needs to update the way of handling icons. I'm so surprised people following a lot of instructions to use this one. I wasn't using it really last 2 years that's why I couldn't put any effort to update it but I'm gonna update it soon to make it simple.

My plan is get rid of these ttf and otf file handling, just using SVG files of icon-fonts. Let's see

frankparadiso commented 5 years ago

@keremciu oh, great! I missed it. Why don't you add this warning to version 4.7 section (here)? Maybe it's more visible.

I can't live without this plugin. Seriously! I understand what do you mean. Every FA PRO update it's a war! I commented with a fix in another issue too.

adamkool commented 5 years ago

Where can I get past versions?

keremciu commented 5 years ago

@adamkool past versions of the plugin? https://github.com/keremciu/sketch-iconfont/releases or font-awesome?

keremciu commented 5 years ago

@frankparadiso perfect! this words keeps me work on more :) thank you

actually this readme file is garbage, I need to make CHANGELOD.md for this version updates. I hope I will make a solution for all of this font-awesome pro problems soon

adamkool commented 5 years ago

@keremciu That's what I was looking for. I wanted to try some older versions to see if they worked with FA 5 Pro. Unfortunately it didn't work.

frankparadiso commented 5 years ago

Hey @adamkool, it works with FA PRO, I use it with FA PRO on a daily basis. Only a little work around: (my)solution and, in general: issue#30

Does it solve your issue?

adamkool commented 5 years ago

@frankparadiso I have update the names in the SVG files as I normally have when using FA Pro. I've been using it for a year without a problem and it stopped working. I onboarded a new employee and he has the same issue right out of the gate. I'm using FA Pro 5.7.2

mamuts12 commented 5 years ago

@adamkool adjusted font awesome 5 pro light mind testing this if it still doesn't work for you. Simply install the font and import SVG font-awesome-5-pro-light.zip

dylanmcleod commented 5 years ago

thanks for your workaround @mamuts12...it's working perfectly for me.

thanks for your help too @keremciu and for the awesome plugin! i use it daily so would be nice if there was a fix for the importing issue but understand your busy!

keremciu commented 5 years ago

@adamkool did you try to use fontello solution? I think your installed ttf files doesn't match with svg icon aliases and it could be a problem. There's no change to import fonts

frankparadiso commented 5 years ago

@adamkool I think you are right. 😢 After dozens of attempts, I'm stuck in this situation:

FA

I'm using: <font id="Font Awesome 5 Pro Light" horiz-adv-x="512" > <font-face font-family="Font Awesome 5 Pro Light" font-weight="300" font-stretch="normal" units-per-em="512" panose-1="2 0 3 3 0 0 0 0 0 0" ascent="448" descent="-64" bbox="-0.124756 -66.9502 672 448.15" underline-thickness="25" underline-position="-51" unicode-range="U+0020-F833" /> and .otf font and FA PRO 5.7.2.

@keremciu any ideas? Does it work on your side?

p.s. I also tried Fontello but the website crashed.

adamkool commented 5 years ago

@mamuts12 That works. How did you get that working? I noticed that the formatting of the code is much different than what you get from Font Awesome

@keremciu The Fontello option works, but I can't easily replace one font with the other in sketch. Just dumps in a [?] for all the icons.

@frankparadiso Here is the Fontello version of the light icon set if needed. No matter what I try with the Font Awesome files, I get the exact result that you posted. fontello.zip

frankparadiso commented 5 years ago

@adamkool the only solution for me is to roll back to FA PRO 5.6.1. I think that is something related to font, .otf and naming. It's related to font itself not to the plugin. So weird.

mamuts12 commented 5 years ago

@adamkool It's actually very simple came across a platform called fontello that converts svgs into a font. Posted a short tutorial above where font-awesome-5.zip is contained.

If it's still unclear will make a video on it

@frankparadiso Fontello didnt crash for me even if i tried 1500+ icons. It just loads slowly and might show that it stopped but after a while it will load the svg's or select all svgs that were selected

adamkool commented 5 years ago

@mamuts12 I know how to get it all working, but the way you formatted it, it doesn't match with older versions of the font naming (probably a Fontello limitation?)

@frankparadiso Thanks for the heads up about rolling back to 5.6.1. I've done that for now and will probably send an email over to Font Awesome asking what they changed.

mamuts12 commented 5 years ago

@adamkool Yeah it seems to be Fontellos limitations. Buuuuuut did some digging and found a possibly better version of Fontello called IconMoon which allows you to change names without limitations and edit your current font made from IconMoon in the future.

And better icon import handling

frankparadiso commented 5 years ago

@adamkool my two cents, you are welcome! Please, keep us updated about FA answer. BTW, after another hour of trying, I packed all my patience and I converted all the font with Fontello (following @keremciu's tutorial and @mamuts12's hint).

keremciu commented 5 years ago

@frankparadiso @adamkool oh yes maybe they changed the alias and that's why there's this problem. It makes sense. I can make it programmatically but I need names likes what alias are you using 5.6.1 in what's not working with the new one? then I can start digging to build a update solution for this case

username1290 commented 5 years ago

one way could be using the Postscript name, that would help settle on what names to use for ID/font-family inside the SVG. Also, that could help avoid the issue of repeated names in the ID, something common in Font Awesome.

frankparadiso commented 4 years ago

@sogen so there isn't a solution that doesn't involve using Fontello? 😕

keremciu commented 4 years ago

@frankparadiso the problem is matching pro font family name with system font family name, we can try some try/learn cases if you want. I can send you different plugin versions with different system font-family matchings maybe one of them works and everyone can use it.

If you'd like to involve you can just me an e-mail with possible system font-family. after installing pro font to your mac, you can send me the screenshot of your font book result which shows that new font.

username1290 commented 4 years ago

@frankparadiso not that I know so far, you'd have to repeat the steps to keep font awesome for every new FA release.

@keremciu For FAv5, they seem to have settled on using a PS name without spaces: FontAwesome5Pro-Regular FontAwesome5Pro-Solid

Font Awesome Pro Regular:

    PostScript name FontAwesome5Pro-Regular
    Full name   Font Awesome 5 Pro Regular
    Family  Font Awesome 5 Pro
    Style   Regular
    Kind    OpenType PostScript
    Language    Asu, Bemba, Bena, Cebuano, Chiga, Cornish, English, Gusii, Ido, Indonesian, Interlingua, Jju, Kalenjin, Kinyarwanda, Lojban, Luo, Luyia, Machame, Makhuwa-Meetto, Makonde, Malay, Morisyen, North Ndebele, Nyankole, Oromo, Rombo, Rundi, Rwa, Samburu, Sangu, Shambala, Shona, Soga, Somali, South Ndebele, Southern Sotho, Swahili, Swati, Taita, Taroko, Teso, Tsonga, Vunjo, Xhosa, Zulu
    Script  Latin
    Version 330.241 (Font Awesome version: 5.10.1)
    Location    /Users/myusername/Library/Fonts/Font Awesome 5 Pro-Regular-400.otf
    Unique name Font Awesome 5 Pro Regular-5.10.1
    Copyright   Copyright (c) Font Awesome
    Description The web's most popular icon set and toolkit.
    Enabled No
    Duplicate   No
    Copy protected  No
    Glyph count 1,715

Font Awesome Pro Solid

    PostScript name FontAwesome5Pro-Solid
    Full name   Font Awesome 5 Pro Solid
    Family  Font Awesome 5 Pro
    Style   Solid
    Kind    OpenType PostScript
    Language    Asu, Bemba, Bena, Cebuano, Chiga, Cornish, English, Gusii, Ido, Indonesian, Interlingua, Jju, Kalenjin, Kinyarwanda, Lojban, Luo, Luyia, Machame, Makhuwa-Meetto, Makonde, Malay, Morisyen, North Ndebele, Nyankole, Oromo, Rombo, Rundi, Rwa, Samburu, Sangu, Shambala, Shona, Soga, Somali, South Ndebele, Southern Sotho, Swahili, Swati, Taita, Taroko, Teso, Tsonga, Vunjo, Xhosa, Zulu
    Script  Latin
    Version 330.241 (Font Awesome version: 5.10.1)
    Location    /Users/myusername/Library/Fonts/Font Awesome 5 Pro-Solid-900.otf
    Unique name Font Awesome 5 Pro Solid-5.10.1
    Copyright   Copyright (c) Font Awesome
    Description The web's most popular icon set and toolkit.
    Enabled No
    Duplicate   No
    Copy protected  No
    Glyph count 1,715

I don't use the other ones (brands, duotone, light), but let me know if you'd like those too.

keremciu commented 4 years ago

@sogen actually I'll try to make new versions just adding conditions here

maybe it would work with adding below line but yes, there're a lot of possibilities, first we need to match what's fontname when we import that font and then we just need to find fontname for sketch typography tool. if (fontname == "fontawesome5proregular") fontname = "FontAwesome5Pro-Regular" https://github.com/keremciu/sketch-iconfont/blob/master/iconfont.sketchplugin/Contents/Sketch/const/import.js#L17

frankparadiso commented 4 years ago

Hey @keremciu, I really appreciate your support and sure, tell me what I can do and I'll do it. I just sent an email at address I found on you git GitHub profile (is it correct?). Hope it helps. And please, keep us updated. Thank you again. 🙇

@sogen same here! The point for me is avoid using Fontello because, you know, it's slow and a little bit frustrating.

keremciu commented 4 years ago

hi @frankparadiso I sent an e-mail to yours, I just discontinued to use info@kerem.ws e-mail, sorry about this inconvenience situation.