[Patternfly] Fontawesome path problem in patternfly.css

Kanagaraj kmayilsa at redhat.com
Tue Jan 27 05:47:52 UTC 2015


Hi Andres,

  I was trying something similar to what you mentioned below.

  I was blocked on importing patternfly.css into main.scss since there 
in no patternfly.scss

  As you mentioned in another mail, I will try to use patternfly.scss from

  https://github.com/patternfly/patternfly-sass/blob/master/sass/patternfly.scss


Thanks,
Kanagaraj

On 01/25/2015 08:46 PM, Andres Galante wrote:
> 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
>>




More information about the PatternFly mailing list