Font Awesome Integration in Middleman?

#1

Hello there,

My project is already existing in another format but I want to convert it to suit MM’s requirements. I mean, I must go from Twig to Ruby. There’s many things planned for this personal project, and dynamic content (blog and portfolio) always been a problem and Middleman is the solution. I already had a Sass file, but I have to convert from HTML to Erubis (or HAML, it’s really interesting). i really wish that Font Awesome is a big part of the project, the strawberry on the cake.

But there’s a catch: how do I implement Font Awesome?

I tried to use font-awesome-sass, but the documentation lacks of details, I don’t know what to do with it. I know there are helpers as shown, but I always end with a syntax error. I installed Sprockets, I read latter’s and Padrino’s documentations, and I still had no clue. I also tried to reverse engineer some templates.

I went for an exploration on many forums and I got a hit onto this :

So I tried to use the font-awesome-middleman ruby gem, but it seems to be outdated:

$ bundle install
Fetching gem metadata from https://rubygems.org/.............
Fetching version metadata from https://rubygems.org/...
Fetching dependency metadata from https://rubygems.org/..
Resolving dependencies...
Bundler could not find compatible versions for gem "middleman-core":
  In snapshot (Gemfile.lock):
    middleman-core (= 4.1.7)

  In Gemfile:
    font-awesome-middleman (~> 4.5) was resolved to 4.5.0, which depends on
      middleman-core (~> 3.0)

    middleman (>= 4.0.0) was resolved to 4.1.7, which depends on
      middleman-core (= 4.1.7)

    middleman-compass (>= 4.0.1) was resolved to 4.0.1, which depends on
      middleman-core (>= 4.0.0)

    middleman-livereload was resolved to 3.4.6, which depends on
      middleman-core (>= 3.3)

Running `bundle update` will rebuild your snapshot from scratch, using only
the gems in your Gemfile, which may resolve the conflict.

On the topic, there’s the MaxCDN solution, but it’s an easy solution, and it’s using third-party servers ; I already ditched it (MaxCDN) as I did for Google Fonts. I really want to use those frameworks on my own server, so any problem would only be accountable to me. It’s also about a thing meta-data, and I want to take care of my visitors (and me), as several of them could be from France.

I am trying to integrate the <i> tag the same way as the link right there*:

<div class="footer-access">
    <%= link_to 'DATALOVE', 'http://neutrinet.be/', :target => '_blank', :name => 'Coeur' %>
    <i class="fa fa-heart fa-lg"></i>
</div>

*I know I might need to adapt my Sass. I simply wish to make the whole act like a button, which will happen on some pieces of my website.

So here’s my question:
As I might need to use font-awesome-sass, how could I implement it? Is there any available way I must have been missing?

I am sorry, I am still a rookie in Webdev, but any light is welcome.

Additional question: Would font-awesome-rails be actually a good alternative to font-awesome-rails?

#2

Hi @Krands –

I don’t use font-awesome, but I’m using a similar library called ionicons in some of my Middleman projects. It uses the same kinds of conventions (multiple classes applied to the <i> tag, etc), so everything here should work for FontAwesome too. Feel free to browse around in this code to see how I set things up (look in the Assets folder mainly).

I find that the simplest way to work with libraries like this is to just go the vanilla SCSS route – just copy the relevant stylesheets and fonts into your project’s assets folder or equivalent, and then make sure you set the paths correctly in the _variables.scss file that the library provides.

If you go to the source of the Font Awesome Sass library on Github, you’ll see a folder called assets, which contains all the stylesheets and font files themselves.

Download the latest release of the library and move the assets files into the appropriate location for your own project: fonts folder into your own assets/fonts directory, etc. I prefer to copy external vendor stylesheets like this into assets/stylesheets/vendor/... so these would live in: assets/stylesheets/vendor/font-awesome.

Then somewhere near the beginning of your main application.css.scss file (or whatever your main stylesheet is called), just add a line like:

@import "vendor/font-awesome/font-awesome";

Ultimately you want a project structure that looks like this in your assets folder:

assets
├── fonts
│   └── font-awesome
│       ├── fontawesome-webfont.eot
│       ├── fontawesome-webfont.svg
│       ├── fontawesome-webfont.ttf
│       ├── fontawesome-webfont.woff
│       └── fontawesome-webfont.woff2
└── stylesheets
    ├── application.css.scss
    └── vendor
        └── font-awesome
            ├── _font-awesome.scss
            └── font-awesome
                ├── _animated.scss
                ├── _bordered-pulled.scss
                ├── _core.scss
                ├── _fixed-width.scss
                ├── _icons.scss
                ├── _larger.scss
                ├── _list.scss
                ├── _mixins.scss
                ├── _path.scss
                ├── _rotated-flipped.scss
                ├── _screen-reader.scss
                ├── _stacked.scss
                └── _variables.scss

If you use an alternate location for files, you can change the path variables in the _variables.scss file to point wherever. By default they will expect to be in assets/fonts/font-awesome/.

1 Like
#3

I think your font awesome question has already been answered. I’m writing this because I noticed you’re considering haml and would like to recommend slim as a cleaner, simpler and easier to read alternative.

http://slim-lang.com/

To use, add the slim gem to your gem file and start saving files with the .slim extension.

#4

Hi @ecgardner, thank you for your extensive answer, I am going to try this right now.

Maybe the lack of the assets folder is the reason why I could not implement the Vanilla Font Awesome.
Here is my tree:

$ tree
.
├── fonts
│   ├── lato-bdit.ttf
│   ├── lato-bd.ttf
│   ├── lato-it.ttf
│   ├── lato-lgit.ttf
│   ├── lato-lt.ttf
│   ├── lato-rg.ttf
│   ├── montserrat-bd.ttf
│   └── montserrat-rg.ttf
├── images
│   ├── logos
│   │   └── logo-crt-hex.png
│   └── photos
│       ├── camera-web.jpg
│       └── urbex-web.jpg
├── index.html.erb
├── javascripts
│   └── all.js
├── layouts
│   └── layout.erb
└── stylesheets
    ├── master.css.sass
    ├── modules
    │   └── variables.sass
    ├── parts
    │   ├── _base.sass
    │   ├── _grids.sass
    │   └── _typography.sass
    └── style.css

I am going to reorganize all of this.

[…] I’m using a similar library called ionicons in some of my Middleman projects.

Yeah, I know it, but I can’t use this because I can’t see some useful icons. But I could change my mind.

Hi @andreimoment, thank you. I am going to look at that.

#5

It’s working !
Here’s my tree for future help !

$ tree
.
├── assets
│   ├── fonts
│   │   ├── font-awesome
│   │   │   ├── FontAwesome.otf
│   │   │   ├── fontawesome-webfont.eot
│   │   │   ├── fontawesome-webfont.svg
│   │   │   ├── fontawesome-webfont.ttf
│   │   │   ├── fontawesome-webfont.woff
│   │   │   └── fontawesome-webfont.woff2
│   │   ├── lato
│   │   └── montserrat
│   ├── images
│   │   ├── logos
│   │   └── photos
│   ├── javascripts
│   │   └── all.js
│   └── stylesheets
│       ├── master.css.sass
│       ├── modules
│       │   └── colours.sass
│       ├── parts
│       │   ├── _base.sass
│       │   ├── _grids.sass
│       │   └── _typography.sass
│       ├── style.css
│       └── vendor
│           └── font-awesome
│               ├── font-awesome
│               │   ├── _animated.scss
│               │   ├── _bordered-pulled.scss
│               │   ├── _core.scss
│               │   ├── _fixed-width.scss
│               │   ├── _icons.scss
│               │   ├── _larger.scss
│               │   ├── _list.scss
│               │   ├── _mixins.scss
│               │   ├── _path.scss
│               │   ├── _rotated-flipped.scss
│               │   ├── _screen-reader.scss
│               │   ├── _stacked.scss
│               │   └── _variables.scss
│               └── font-awesome.scss
├── index.html.erb
└── layouts
    └── layout.erb

16 directories, 40 files
#6

Nice!

It’s good to have a sense of how to structure a project from scratch when you need to, but these days I find I save lots of time by starting from a good template. I highly recommend Thoughtbot’s Proteus Middleman template as a good starting point – out of the box you get a logical asset structure and the Sprockets asset pipeline, Haml for templates, and the excellent Bourbon / Neat / Bitters SCSS libraries for front-end styling.

Bourbon even has a handy short-hand for @font-face rules, which can otherwise get very tedious since each webfont has 4-5 files per weight…

#7

Well, I converted the whole newborn project from Twig to Middleman. I was using Twig because partials and layouts, which made my development easier as I used Bolt CMS for a School Graduation Project. But as my website is running onto a Raspberry Pi 2, I wanted to be light right at the first deployment.

Here’s the history of my personal project on my own git. I am learning everything about web project, so it’s a really slow workflow… But I am confident that i’ll be able to deliver a kickass light website with modests possibilities.[quote=“ecgardner, post:6, topic:2226”]
I highly recommend Thoughtbot’s Proteus Middleman template as a good starting point – out of the box you get a logical asset structure and the Sprockets asset pipeline, Haml for templates, and the excellent Bourbon / Neat / Bitters SCSS libraries for front-end styling.
[/quote]

If I need to start a new project, I promise to think about it.

Now I am going to convert my website into Slim, and, build mockups for new pages.