Source

fugue-icons /

Filename Size Date modified Message
examples
fugue_icons
24 B
17.6 KB
183 B
2.5 KB
1.5 KB

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.

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') }}">

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.