Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

General

How to use font-awesome/line-awesome in Quark

Solved by pamtbaau View solution

Started by Delon 6 years ago · 10 replies · 2693 views
6 years ago

Hi there

I'm using the default theme and I'm trying to get from awesome to work with my features template. Nothing appears currently, is it an issue with font awesome credentials, if so, how to I add them?

Thanks

6 years ago

@daredevil, I have an Installation of the 'One Page' skeleton which uses Quark. The feature module is showing the line-awesome icons correctly...

image|462x246

Have you made any changes to the theme lately? E.g trying to replace line-awesome with font-awesome?

6 years ago

Hi there

No I haven't changed anything. I'm trying a demo features layout. What would be the best way to reference the font awesome art that I want. I add it to the icon section in the header but how do I get the correct name?

Thanks

6 years ago

@daredevil, I'm not using Line Awesome myself, but this is what I know about it...

Quark and Font Awesome:

  • Quark does not use Font Awesome, but Line Awesome (see 'themes/quark/fonts')
  • Quark comes with a wrapper 'themes/quark/css/line-awesome.min.css' to mimic the names used by Font Awesome.
    For example, you can use fa-bug while this would be la-bug in Line Awesome.

Finding icons:

  • To get a list of icons, your best bet is to go to Line Awesome, scroll down a bit and search for an icon. E.g. 'bug'.
  • Click the 'bug' icon to see its name.
  • Replace la-bug with fa-bug
  • In your feature page add:
    YAML
    features:
    - header: We serve plenty of bugs in our code
      icon: fa fa-bug
    

    image|690x229

Hope this helps...

6 years ago

Thanks so much for the help but it doesn't seem to work. I've followed your instructions exactly.

Ok, fa fa-bug works but the one I'm trying does not fa-stream, is it because my lib needs to be updated or am I still doing something wrong,

The original code is <i class="las la-stream"></I>
I changed it to fas fa-stream ?
las fa-film
las fa-video
las fa-dot-circle

Also don't work

Thanks

last edited 07/30/20 by Delon
6 years ago Solution

@daredevil, fa-stream does not seem to exist in the line-awesome library provided by Quark.

According the CHANGELOG.md of Quark:

v1.0.2

02/19/2018

Switched to a fork of LineAwesome icons compatible with FontAwesome 4.7.0

No guarantees, but the following upgrade to the latest line-awesome library seems to work on the 'One-Page' skeleton:

  • Go to https://icons8.com/line-awesome
  • Click 'Download Zip'
  • From zip-file copy all files from /1.3.0/fonts into /themes/quark/fonts/
  • Rename /themes/quark/css/line-awesome.min.css to line-awesome.min.css.org (just in case...)
  • From zip-file copy /1.3.0/css/line-awesome.min.css to /themes/quark/css/
  • Open line-awesome.min.css in editor and replace all .la with .fa
  • In features.md add:
    YAML
    features:
      - header: Stream
        icon: fa fa-stream
      - header: Film
        icon: fa fa-film
      - header: Video
        icon: fa fa-video
      - header: Circle
        icon: fa fa-dot-circle
    
  • Browse to the page and you should get something like:
    image|451x253

Note: All changes to a theme should be made in an inherited theme. If not, your changes might get lost when a new version of Quark arrives.

Disclaimer:
Again, this is a quick and dirty upgrade and there may be oversights from my part leading to glitches... Please test your site.

last edited 07/30/20 by pamtbaau
6 years ago

Thanks for the help, I appreciate it.

6 years ago

@daredevil, I appreciate your appreciation, but does the suggestion work for you?

Note, I have added an extra note to my reply reminding you to use an inherited theme to prevent losing customisations.

6 years ago

Hi there, yes thanks modded everything my side, it works now. Thanks very much.

I've got a bunch of questions and your are really helpful, if I don't find answers on the forum should create a new thread for each question?

6 years ago

@daredevil, Yes, for each question you should create a new topic with a proper title.

I have taken the liberty to changed the title of this topic a bit to better match the content. Hope you don't mind...

6 years ago

Not at all, thank you.

Suggested topics

Topic Participants Replies Views Activity
General · by Jerry Hunt, 4 days ago
2 101 17 hours ago
General · by pamtbaau, 22 hours ago
1 68 22 hours ago
General · by Andy Miller, 1 day ago
0 53 1 day ago
General · by Marcel, 12 months ago
6 361 5 days ago
General · by Duc , 6 days ago
3 49 6 days ago