Bitbucket is a code hosting site with unlimited public and private repositories. We're also free for small teams!

Close
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
applications.

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

.. _`Yusuke Kamiyamane`: http://p.yusukekamiyamane.com/
.. _`Creative Commons Attribution 3.0`: http://creativecommons.org/licenses/by/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"
        href="fugue-icons.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: http://flask.org


Use with Django applications
============================

Add this package to INSTALLED_APPS in your django settings:

. code-block:: python
    INSTALLED_APPS = (
        'django.contrib.auth',
        'django.contrib.admin',
    ...
        'fugue_icons',
    )

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 ``manage.py collectstatic`` when deploying your application.

Recent activity

Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.