This is the Bower package for GitHub Octicons.
Create a new file called bower.json (if you don’t have one already).
Add a new line for the Octicon dependency, pointing to the correct repository:
{
"name": "my_great_project",
"dependencies": {
"octicons": "*"
}
}
Run bower install
. The Octicons styles will be downloaded to bower_components/octicons.
Link to the octicons.css
stylesheet in the <head>
of your <html>
page:
<link rel="stylesheet" href="bower_components/octicons/octicons/octicons.css">
<span class="octicon octicon-microscope"></span>
Octicons includes a stylesheet specifically for Rails 4/Sprockets.
Create a new file called vendor/assets/bower.json (if you don’t have one already).
Add a new line for the Octicon dependency, pointing to the correct repository:
{
"name": "my_great_project",
"dependencies": {
"octicons": "*"
}
}
cd
into vendor/assets
and run bower install
. The Octicons styles will be downloaded to vendor/assets/bower_components/octicons.
Open your config/application.rb, and add this line inside your Application:
config.assets.precompile += %w(*.svg *.eot *.woff *.ttf)
sprockets-octicons
: /*
= require sprockets-octicons
*/
<span class="octicon octicon-flame"></span>
def octicon(code)
content_tag :span, '', :class => "octicon octicon-#{code.to_s.dasherize}"
end
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"
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;
}
Give this a try, you should be all set:
Check out issues with the FAQ label.
Octicons operates similarly to Semver with the following version convention: