[Patternfly] Fontawesome path problem in patternfly.css

[Andres Galante]

Hi Kanagaraj,

I will tel you how I would do it, but I am not completely sure it is the correct way to do it.

1- I would import patternfly.scss on main.scss
2- On main.scss I would overwrite the path to the fonts:

$fa-font-path:  "PATH_TO_THE_FONTS/components/font-awesome/fonts";

Be aware that it must be relative to your main.scss

3- On the HTML call just one css file, main.css generated from main.scss

That way you make just one request from your html that includes patternfly base styles plus your styles.

For a reference I am doing it this way on Aerogears new UPS console design. I am using less, but the method is the same: 
https://github.com/andresgalante/UPS/blob/master/less/styles.less

Let me know how it goes,

Thanks

Andrés



----- Original Message -----
From: "Kanagaraj Mayilsamy" <kmayilsa at redhat.com>
To: "Andres Galante" <agalante at redhat.com>
Cc: patternfly at redhat.com
Sent: Sunday, January 25, 2015 4:52:47 AM
Subject: Re: [Patternfly] Fontawesome path problem in patternfly.css

Hi Andres,

 Thanks for you reply.

 I couldn't still get this work. May be i did not understand what you meant. Can you please correct me if i am wrong?

 I have tried the following things.

 I did add _variables.scss to my project and imported that to main.scss. Since there is no patternly.scss i could not figure out a way to import it to main.scss. So even though i did override the path in _variables.scss, it did not have any impact. Still my browser says could not find the font. Is there anything wrong in what i am doing?

 Then i tried an alternative by directly importing font-awesome.scss into main.scss then everything worked fine(I did not override the path here since the fonts were available in ../fonts). But this ends up having two copies of font-awesome, one inside patternfly.css another one in main.css. Now i don't see the font error in browser. Is this a reasonable workaround?
 
 Is there a plan to support scss for patternfly like what font-awesome does? 

Thanks,
Kanagaraj

----- Original Message -----
> From: "Andres Galante" <agalante at redhat.com>
> To: "Kanagaraj Mayilsamy" <kmayilsa at redhat.com>
> Cc: patternfly at redhat.com
> Sent: Friday, January 23, 2015 10:50:06 PM
> Subject: Re: [Patternfly] Fontawesome path problem in patternfly.css
> 
> Hi Kanagaraj,
> 
> On /sass/_variables.scss you can set up the correct path:
> $fa-font-path: "../../components/font-awesome/fonts";
> 
> Let me know how it goes,
> Thanks!
> 
> Andrés
> 
> 
> ----- Original Message -----
> From: "Kanagaraj Mayilsamy" <kmayilsa at redhat.com>
> To: patternfly at redhat.com
> Sent: Friday, January 23, 2015 2:06:43 PM
> Subject: [Patternfly] Fontawesome path problem in patternfly.css
> 
> Hi,
> 
>  I am trying to use patternfly in an existing project which currently uses
>  bootstrap and some custom styles written in scss. After incorporating
>  patterfly, fontawesome fonts are not downloading. If i look at the
>  patternfly.css file, its referring to
>  "../../components/font-awesome/fonts/fontawesome-webfont.eot?v=4.1.0" but
>  the fonts are placed under dist/fonts. Is there a way to override this path
>  in patternfly.css?
> 
>  I was looking at the aerogear-unifiedpush-server project which is addressing
>  this issue. But the overriding is done in main.less. Since less is not used
>  in my project is there any other ways to achieve it?
> 
>  Btw, i am using grunt to build the stuff.
> 
>  Any help would be really appreciated.
> 
> Thanks,
> Kanagaraj
> 
> _______________________________________________
> Patternfly mailing list
> Patternfly at redhat.com
> https://www.redhat.com/mailman/listinfo/patternfly
>