Skip to content
GitHub's icon font
CSS
Find file
Latest commit 810a36e @jonrohan jonrohan Merge pull request #81 from aqnouch/patch-1
Updated copyright to 2016
Failed to load latest commit information.
octicons Bump to 3.5.0
svg Bump to 3.5.0
.gitignore Modify .gitignore
CHANGELOG.md Bump to 3.5.0
CONTRIBUTING.md Add files
LICENSE.txt 3.4.0
README.md Add sketch-octicons to Resources section
bower.json Correct the license ids used in bower.json
package.json Bump to 3.5.0

README.md

Octicons!

This is the Bower package for GitHub Octicons.

Add Octicons to your project

  1. Create a new file called bower.json (if you don't have one already).

  2. Add a new line for the Octicon dependency, pointing to the correct repository:

    {
      "name": "my_great_project",
      "dependencies": {
        "octicons": "*"
      }
    }
  3. Run bower install. The Octicons styles will be downloaded to bower_components/octicons.

  4. Link to the octicons.css stylesheet in the <head> of your <html> page:

    <link rel="stylesheet" href="bower_components/octicons/octicons/octicons.css">
  5. Simply use an icon in your HTML page:

    <span class="octicon octicon-microscope"></span>

Rails' asset pipeline

Octicons includes a stylesheet specifically for Rails 4/Sprockets.

  1. Create a new file called vendor/assets/bower.json (if you don't have one already).

  2. Add a new line for the Octicon dependency, pointing to the correct repository:

    {
      "name": "my_great_project",
      "dependencies": {
        "octicons": "*"
      }
    }
  3. cd into vendor/assets and run bower install. The Octicons styles will be downloaded to vendor/assets/bower_components/octicons.

  4. Open your config/application.rb, and add this line inside your Application:

    config.assets.precompile += %w(*.svg *.eot *.woff *.ttf)
  5. In your application stylesheet, require sprockets-octicons:

    /*
    = require sprockets-octicons
    */
  6. Simply use an icon in your HTML page:

    <span class="octicon octicon-flame"></span>
  7. If you want a view helper, add something like this to app/helpers/application_helper.rb:

    def octicon(code)
      content_tag :span, '', :class => "octicon octicon-#{code.to_s.dasherize}"
    end

Installing locally

It's easy to install octicons locally if you have Homebrew installed. Simply run the following commands:

brew install caskroom/cask/brew-cask
brew tap "caskroom/fonts"
brew cask install "font-octicons"

Best practices

  • Octicons look best in sizes that are multiples of 16px. You can update the size using the font-size CSS property. For example:

    .octicon {
      font-size: 32px;
    }
  • Octicons are not monospaced. This lets them work well next to type, but it means they won’t stack nicely by default. If you intend to stack octicons, such as in navigation, you will want to add some CSS to make them the same width, and centered. For example:

    .navigation .octicon {
      width: 16px;
      text-align: center;
    }

Resources

Why can't I see the characters in Font Book??

Give this a try, you should be all set:

FAQ

Check out issues with the FAQ label.

Versions

Octicons operates similarly to Semver with the following version convention:

  • Major: Breaking changes — removed icons, markup changes, unicode switches, css renames, icon redesigns
  • Minor: Non-breaking changes — new icons, new aliases, minor icon changes
  • Patch: Unnoticeable tweaks — slight visual changes, package updates
Something went wrong with that request. Please try again.