Giter Club home page Giter Club logo

grails-font-awesome's Introduction

Grails Font-Awesome plugin

Build Status Analytics

Branches

The current master branch is for versions of the plugin compatible with Grails 3. There is a "grails2" branch for on-going maintenance of previous versions of the plugin compatible with Grails 2. Please submit any pull requests to the appropriate branch.

Provides the Twitter Bootstrap compatible awesome font based icon set Font Awesome as a Asset-Pipeline or Grails resource.

Summary

Font Awesome is an iconic font designed for use with Twitter Bootstrap. Twitter Bootstrap comes with an icon set (GLYPHICONS) built in. This set is rendered using image sprites. Font based icons are an alternative, and convenient means of incorporating icons into a web application. It is a technique that is growing in popularity. One of its plus points is how easy it is to manipulate an icon with css. A few lines of the most basic css can change the size and color of an icon, or set of icons. Try doing that with an image sprite!

Installation

In BuildConfig.groovy, add the dependency to "plugins" section:

plugins {
    //...
    runtime ':font-awesome-resources:5.0.0.0'
    //...
}

Change the version to reflect the actual version you would like to use.

Usage

Including the resources with Asset-Pipeline plugin

The recommended way is to use the asset-pipeline plugin (minimal 0.1.7). It is the default since Grails 2.4.0 and replaces the resources plugin.

To include font-awesome resources add the following to your application's css.

Stylesheet grails-app/assets/javascripts/application.css:

/*
*= require font-awesome
*/

LESS Support

In you LESS stylesheet file just add following code at the top:

@import 'font-awesome';

Resources plugin

With Grails version 2.3.8 and later, you should set compile ":resources:1.2.8" rather than runtime ":resources:1.2.8" in BuildConfig.groovy in order to avoid an exception.

  • Reference the font-awesome resource from within your ApplicationResources file or directly in a gsp page/layout Example
// ApplicationResources.groovy
customBootstrap {
    dependsOn 'font-awesome'

    resource url: 'css/bootstrap.css'
    resource url: 'js/bootstrap.js'
    resource url: 'css/bootstrap-fixtaglib.css'
}

The above example I'm not using the grails twitter bootstrap plugin. When using font-awesome, I found it was best to build the bootstrap files from the original Bootstrap website and opt not to include the glyphicons sprite. I did however borrow some of the good work done on the plugin to integrate bootstrap with Grails paginate functionality.

Usage in Grails Resources support

A font-awesome resource depends on font-awesome-css or font-awesome-less (if less plugin installed).

Declare bootstrap resource module in GSP page header:

<r:require modules="font-awesome"/>

Usage in GSP page with Resource support

<html>
    <head>
        <meta name="layout" content="main"/>
        <r:require modules="font-awesome"/>
    </head>
<body>
    <h1> Hello World </h1>
</body>
</html>

Icons usage

You can include an icon in your HTML using the appropriate css class. See the Font Awesome for a list of the icons and their corresponding class names.

Example

<i class="fa fa-user"></i>

Copyright and License

font-awesome-resources plugin:

Copyright 2014 Alexey Zhokhov under the Apache License, Version 2.0. Supported by AZ.

Font Awesome files:

http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)

grails-font-awesome's People

Contributors

burtbeckwith avatar cdeszaq avatar davydotcom avatar donbeave avatar halfbaked avatar jorgeuriarte avatar sbglasius avatar sgates avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.