Jump to content


Photo

Is FontAwesome down?


  • Please log in to reply
12 replies to this topic

#1 Grant Barker

Grant Barker

    Dedicated Member

  • Members
  • PipPip
  • 230 posts
  • Gender:Male
  • Location:Tokyo, Japan
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 02 January 2017 - 12:20 PM

I've noticed that my fontawesome fonts are not showing up, and the pages are taking ages to load.

Does anyone else here use fontawesome and are you experiencing any problems?

Maybe the server is down.

 

(In the meantime I removed their script from my pages so that the pages load normally.)


Edited by Grant Barker, 02 January 2017 - 12:33 PM.


#2 Grant Barker

Grant Barker

    Dedicated Member

  • Members
  • PipPip
  • 230 posts
  • Gender:Male
  • Location:Tokyo, Japan
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 02 January 2017 - 12:38 PM

Strange. It seems to be OK now on one of my sites. I'm not sure what the issue is/might have been.

 

Edit: Yes, it has been fixed. I'm not sure what the issue was. Fonts show up and pages load at the normal speed.


Edited by Grant Barker, 02 January 2017 - 02:32 PM.


#3 rbrtsmith

rbrtsmith

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 3,640 posts
  • Gender:Male
  • Location:Manchester, UK
  • Experience:Nothing
  • Area of Expertise:Web Developer

Posted 02 January 2017 - 01:48 PM

Icon font providers will go down eventually as developers are (rightly so) switching to SVG for icon sets and away from icon fonts.

 

This article is quite old now, and even then it was clear that SVG is the way forwards https://css-tricks.c...n-fonts-vs-svg/

 

 

I'm aware this doesn't answer your question, but if I were you I'd be looking to make the switch to SVG and self host them.


Edited by rbrtsmith, 02 January 2017 - 01:49 PM.


#4 Grant Barker

Grant Barker

    Dedicated Member

  • Members
  • PipPip
  • 230 posts
  • Gender:Male
  • Location:Tokyo, Japan
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 02 January 2017 - 02:29 PM

Yes. Thanks very much Robert. I will look into that tomorrow. (Going to sleep)

It does feel a bit backwards to be linking to another offsite server or resource, just to use a few fonts (FB, G+, TW , speech marks and speech bubbles).

If I can simulate the same way that they look, then I'll definitely switch. Also, if it applies, then one less script to download is a good thing in my book.

Thank you. I didn't know about this option. I'll check it out tomorrow.



#5 Grant Barker

Grant Barker

    Dedicated Member

  • Members
  • PipPip
  • 230 posts
  • Gender:Male
  • Location:Tokyo, Japan
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 02 January 2017 - 11:44 PM

So, we can use the icons from a resource like IcoMoon and then save them to SVG. Very handy.

 

I'm still curious how well the icons can be positioned around or next to text (for example quotation or speech marks). I'll get to that step soon.

 

And thanks rbrtsmith.


Edited by Grant Barker, 03 January 2017 - 12:03 AM.


#6 Grant Barker

Grant Barker

    Dedicated Member

  • Members
  • PipPip
  • 230 posts
  • Gender:Male
  • Location:Tokyo, Japan
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 03 January 2017 - 05:59 AM

I changed all of my fontawesome icons now to svg, so thanks.

If I'm honest, I feel that the actual font is a tiny bit more crisp compared to the svg, especially at very small sizes, but it's good to have one less script / url for the page to go to. Cheers.



#7 rbrtsmith

rbrtsmith

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 3,640 posts
  • Gender:Male
  • Location:Manchester, UK
  • Experience:Nothing
  • Area of Expertise:Web Developer

Posted 03 January 2017 - 07:51 PM

There's no way an Icon font will render crisper than an SVG.  They are both vector and thus will render as sharply as your display can render.



#8 dap

dap

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,359 posts
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:Designer

Posted 03 January 2017 - 08:12 PM

@rbrtsmith assuming both are aligned to the pixel grid - if the svg for example has half pixels then it won't look as crisp. conversely if the icon font has been hinted better then it could appear better, though not necessarily "crisper" for example small circles can look a bit blocky if they're aligned to the pixel grid, yet can look better (by better i mean perhaps smoother rather than crisper) if they have more antialiased pixels (i.e. pixels that sit partly on the grid and partly off)



#9 rbrtsmith

rbrtsmith

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 3,640 posts
  • Gender:Male
  • Location:Manchester, UK
  • Experience:Nothing
  • Area of Expertise:Web Developer

Posted 04 January 2017 - 10:04 PM

What do you mean by pixel grid?  SVG is vector not raster so there's no concept of pixels beyond what your device is able to render to it's screen.  Are you talking about the viewbox? because the viewbox just controls what part of the SVG is visible nothing more.


Edited by rbrtsmith, 04 January 2017 - 10:05 PM.


#10 Grant Barker

Grant Barker

    Dedicated Member

  • Members
  • PipPip
  • 230 posts
  • Gender:Male
  • Location:Tokyo, Japan
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 04 January 2017 - 11:45 PM

Here is a screenshot image I saved, when considering questioning how to align the svg on the page to be similar to the alignment of the font: On my actual page, the bubbles are quite small, and I noticed a slight difference at that size. But I stayed with the SVG to save having to link to Font Awesome (one less script/url). Both bubbles are from the Font Awesome libraries via the IcoMoon App. Maybe you can see a difference, or try for yourselves via IcoMoon.

alignment-bubbles.png


Edited by Grant Barker, 04 January 2017 - 11:46 PM.


#11 dap

dap

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,359 posts
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:Designer

Posted 05 January 2017 - 06:19 PM

i mean the pixel grid in the programme where the vector is created e.g illustrator . e.g draw a square not aligned to the grid and it won't have sharp edges when exported as svg, at least not as i understand it. if the start point for the vector path rendered by the browser is x=0.5 pixels and y =0.25 pixels and so on then the lines will be drawn exactly i.e will be antialiased when it should be using a straight path of pixels without any 'half' pixels.

 

I should try a simple test in illustrator one aligned and one not aligned to the pixel grid and export them as svg to show (or confirm my supsicions) :)


Edited by dap, 05 January 2017 - 06:20 PM.


#12 dap

dap

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,359 posts
  • Gender:Male
  • Experience:Intermediate
  • Area of Expertise:Designer

Posted 06 January 2017 - 01:32 PM

if you look at this code pen with two svgs you'll see the second is fuzzier on the left-right edges than the first. the first is aligned to the pixel grid in illustrator and has an artboard (quivalent to the viewbox) of pixels in integers. the second has and artbaord that is percentages of a pixel wide and tall, and it's located at x 0.25, y=0.333. in illustrator they are about 85 pixels wide (the first is exactly 85 px x 85 px) and then i've scaled them via css.

 

http://codepen.io/dp/pen/ygNYjw?editors=1100 



#13 rbrtsmith

rbrtsmith

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 3,640 posts
  • Gender:Male
  • Location:Manchester, UK
  • Experience:Nothing
  • Area of Expertise:Web Developer

Posted 06 January 2017 - 09:30 PM

Yeah, it's pretty standard when exporting an SVG for use on the web you fit the vector to the artboard bounds.  Illustrator has a function that does just that.

 

Although I was not aware that not doing this could also cause rendering issues, I can clearly see those in that pen you shared so thanks for highlighting that.  The main issue I'd come across not fitting the vector to its bounds centre around alignment which then becomes a pain.

 

To vertically align the SVG you can set it as an inline-block then hit vertical-align: middle and it should centre it relative to the text.






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users