Giter Club home page Giter Club logo

entypo-rails's Introduction

entypo-rails

An asset pipeline plugin for Rails to easily add the Entypo icon font faces and an initial set of icon classes.

Entypo

The Entypo pictograms by Daniel Bruce http://www.entypo.com/ are provided in vendor. These pictograms are licensed under CC BY 3.0 and the font unter SIL Open Font License.

Installation

Add this line to your application's Gemfile:

gem 'entypo-rails'

And then execute:

$ bundle

Then start your server and open

http://localhost:3000/entypo/charmap

Usage

Either use the provided mappings, based on icons-... and the :before:

// application.css
*= require entypo
@charset "UTF-8";
<!-- some_template.html... -->
This is cool <i class="icon-thumbs-up"></i>.
Fork it on <i class="icon-social-github"></i>.

or just include the entypo font face and do the mappings yourself, go to http://localhost:3000/entypo/charmap in your browser for a list of all unicode codepoints and CSS classes. This is only available in development mode. Alternatively check out entypo.scss, the social font is prefixed with .icon-social-.

// application.css
//= require entypo-fonts
@charset "UTF-8";

// icons.scss (or wherever)
i.cool { font-family: 'entypo' }
i.cool:before { content: "\1F44D"; }
<!-- some_template.html... -->
This is cool <i class="cool"></i>.

Options

Change the icon prefix

Simply add an initializer like e.g. config/initializers/entypo.rb and add:

Entypo.css_prefix = "my-icon"

After setting a new prefix restart your server and ensure to clear the Rails asset caches in tmp/cache/asset, otherwise the new prefix might not be picked up correctly.

Note: that the value is not checked, thus ensure to use onlu valid CSS class names.

Enable the /entypo/charmap in a non-development environment

By default entypo-rails only enables the /entypo/charmap route in the development environment. To enable it in another environment open the environment specific configuration file from config/environments/<env>.rb and append:

# at the end of the file...
Entypo.charmap = true

Customize the charmap path (or add authorization etc.)

To use a custom URL for to display the charmap, first disable the automatic route generation by adding an initializer e.g. config/initializers/entypo.rb with:

Entypo.charmap = false

Then add a new route to your application's config/routes.rb file:

Your::Application.routes.draw do
  # other routes...
  get '/custom/path/to/charmap', to: 'entypo/charmap#index'
end

Troubleshooting

The prefix icon clashes with the prefix defined by bootstrap and thus I'm not able to use entypo icons.

The prefix can be changed by setting Entypo.css_prefix = "e-icon" in an initializer. Ensure that after changing the prefix the caches in tmp/cache/assets should be cleared, otherwise it can happen that the prefix is not picked up during development.

In production, the fonts are digested to entypo- 4a74efb3ed26fe0c57556bcc0b7e871f... Meanhwile it's just entypo.eot in the CSS file, without the digest. Therefore the font cannot be loaded!

When compiling assets ensure to set the correct RAILS_ENV, otherwise assets or not digested in the CSS files. See this discussion for more, or simply ensure to run:

RAILS_ENV=production rake assets:precompile

Changes

3.0.0

  • Set minimum requirement to Rails 4.1+
  • Fixed deprecation warnings #15
  • Fixed entypo font previews at /entypo/charmap

2.2.3

  • Fixed google-plus icon names, #16 by @medinarodel

2.2.1

  • Ensure .erb files are included within packaged gem
  • Fixed route drawing code to enable /entypo/charmap again
  • Added icon prefix option, based on #9 thx @xdite

2.1.0

  • Added webkit font smooting #8, by @vojto

2.0.2

  • Fix /_entypo/charmap to load correct stylesheet from app/assets
  • Switch to use UTF-8 encoded chars, by @michaelkirk

2.0.1

  • Rails 4 compatibility: only css & js files are precompiled from vendor/assets

2.0.0

  • Breaking: combined entyo and entypo social font, so entypo-social font family no longer exists
  • #2, #3, fixed display issues on Opera

1.0.2

  • Bugfix release for Rails asset pipeline

1.0.0

  • Initial release, with entypo fonts from 2012-10-31

Contributing

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Added some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

entypo-rails's People

Contributors

brchristian avatar edwardbetts avatar lwe avatar medinarodel avatar michaelkirk avatar piedoom avatar vojto avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

entypo-rails's Issues

Improve the doc on entypo social icons

The social icons are not shown in my rails app.

It took me a while to figure out that the gem entypo-rails used a different naming convention for social icons. It's icon-social-twitter but I was assuming it's simply icon-twitter.

You may say that I should checked "http://localhost:3000/_entypo/charmap". I did. But it's a blank page for me. So I used "http://www.entypo.com/characters/" as the reference.

I think it's better add some note like below to the readme section.

# Entypo Social Icons
The social icon class names are started with "icon-social-". Example: "icon-soical-github"

Icons out of date

Title is sort of self explanatory. I was just going to update the font when I realized that the normal and social icons have been split into 2.

How would you go about handling this? I forked it so I'd be more than happy to help, I just wasn't sure of your preference.

Rails 5 compatiblity

The stable release is limited to Rails 3 and the release candidate to Rails 4. Now that Rails 5 is the stable version, this gem cannot be used anymore.

Can you please fix this @lwe ?

Google Plus icon

Hi Sir!

I am trying to use google plus icon. I checked your generated CSS and it has this line

/* f30e */

.icon-social-google + :before {
  content: '\f30f';
}

/* f30f */
.icon-social-c-google + :before {
  content: '\f310';
}

I think that won't work because it will be treated as invalid css (name).
Can we use something like icon-social-google-plus & icon-social-c-google-plus?

By the way, as a workaround, I added this in my css file:

.icon-social-google-plus:before {
  content: '\f30f';
}

thanks!

Social Icons Don't Display

This happens even in the character map. All the other characters show up and function as advertised.

Any ideas?

sprockets deprecation: Extra .css in SCSS file is unnecessary

While upgrading an application from Rails 3.2 -> 4.2, we started to receive the following deprecation warning:

DEPRECATION WARNING: Extra .css in SCSS file is unnecessary. Rename
vendor/bundle/ruby/2.1.0/gems/entypo-rails-2.2.2/app/assets/stylesheets/entypo-fonts.css.scss to 
vendor/bundle/ruby/2.1.0/gems/entypo-rails-2.2.2/app/assets/stylesheets/entypo-fonts.scss.

some of the fonts won't display on windows 8 chrome or ubuntu chrome

This is weird. I have been using entypo for a while and have noticed that some of the fonts simply do not display on windows 8 chrome. On Ubuntu, they simply don't show up (all of them). I don't know how to reproduce this for you guys. Here is my website for an example : www.harrisrobin.co

What could be the cause of this ?

I tested my site on firefox on both operating systems and this problem doesn't exist

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.