fugue-icons / README

Fugue Icons

This is a set of web icons, created by `Yusuke Kamiyamane`_ and provided by him
on a `Creative Commons Attribution 3.0`_ license.

The icons have been merged together into a single file using the script
included in this package, to make them easier to use as CSS sprites in web

Also, some glue code that makes it easier to include the icons in your
application has been provided.

.. _`Yusuke Kamiyamane`:
.. _`Creative Commons Attribution 3.0`:

General usage

To use those icons in any web application, just links the generated
``fugue-icons.css`` file in your HTML header like this:

. code-block:: html
    <link rel="stylesheet" type="text/css"

Be sure to use an URL at which the files are actually served, which is specific
to your application. Now, to include an icon in your HTML template, just add
apropriate classes to the element that is supposed to display that icon:

. code-block:: html
    <p>This is an abacus: <span class="fugue-icon fugue-abacus"></span>.</p>

You might need to add some additional CSS rules to adapt to your existing
stylesheets. The first class, ``fugue-icon``, sets some basic common styles
for the icon, while the second class, ``fugue-abacus``, scrolls the sprite
sheet image to the right position that displays the "abacus" icon.

Use with Flask applications

You can use this package directly with your Flask_ application, by registering
the provided blueprint.

. code-block:: python
    import flask
    import fugue_icons.blueprint import fugue_icons

    app = flask.Flask(__name__)
    app.register_blueprint(fugue_icons, url_prefix='/fugue-icons')

Then, in your template's HTML header include the link to the CSS file:

. code-block:: html
    <link rel="stylesheet" type="text/css"
        href="{{ url_for('fugue_icons.static', filename='fugue-icons.css') }}">

.. _Flask:

Use with Django applications

Add this package to INSTALLED_APPS in your django settings:

. code-block:: python

In your template's HTML header include the link to the CSS file:

    <link rel="stylesheet" type="text/css"
        href="{{ STATIC_URL }}/fugue-icons.css">

Remember to run `` collectstatic`` when deploying your application.