Technitribe

interesting problems (and a few solutions, too)

Technitribe
  • About the Authors
  • Log In
  • Log Out
  • Lost Password
  • Register
  • Reset Password
    • 1 May 2013

      Rails, Bootstrap, Icons, and Classes

      Written by Tim Bielawa

      Scope

      You’re using Ruby on Rails and the Twitter Bootstrap framework. You are using the link_to ActionView helper method. The generated anchor will be visually represented in a navbar as a Bootstrap button component (via the ‘btn‘ and ‘btn-small‘ class attributes). Finally, you want to use one of those sweet Boostrap icons instead of text. It should look something like this:

      RNOC Action Bar

      RNOC Action Bar

      The Problem

      I had difficulty understanding the correct way to call the link_to method to get the results I desired. Part of my failure to grok is because I’m a complete newbie to RoR, and the other part of it is because the link_to method has 4 distinct signatures that you can call it by.

      After some searching around I found a couple of resources on Stack Overflow which looked promising:

      • link_to in helper with block
      • Using link_to with embedded HTML
      • Best way to use Twitter Bootstrap Icons as Links in Ruby on Rails 3?

      However, none of those results were quite exactly what I was looking for. They did provide some useful insight into solving the problem though.

      Solution

      Here’s the code:

      Explanation

      If my understanding is correct, then this approach implements the third link_to method signature: link_to(options = {}, html_options = {}) do 

      The options parameter we give here is a hash which is passed to the url_for method, and finally to the Route Module. It ends up returning a URL string in the form of http://yoursite/pages/new

      The html_options parameter describes the attributes (other than href) which we desire present in the generated anchor. In this example we are describing an anchor with two classes: btn and btn-small. You could add additional symbols to the hash just as easily: {:class => ‘btn btn-small’, :id => ‘new-page-button’, :title => ‘Create A New Page’}

      Finally, the way we’re calling link_to requires that we pass it a block to use as the generated link body (or in our case, icon). So we escape from the ERB sequence for a moment, enter the HTML which Boostrap turns into an icon, and then close the block.

      • Tags »
      • bootstrap css ERB html ruby on rails

    Leave a Reply Cancel reply

    Your email address will not be published. Required fields are marked *

    • The Authors
    • Virtual Disk Guide

      Interested in virtualization? Do QCOWs rule your filesystem? Are you a libvirt or KVM+QEMU wizard? I wrote a book about virtual disk management. Check out the The Linux Sysadmin's Guide to Virtual Disks online for free at ScribesGuides.com.


      Consider supporting the author by purchasing a hard copy of the first edition for just $10.00 on Lulu.com.

    • bitmath

      bitmath is a Python library for dealing with file size units (GiB's, kB's, etc) in a sane way. bitmath supports arithmetic, rich comparison, conversion, automatic best human-readable representation, and many other utility functions. Read some examples on the docs site or check out the source on GitHub.

    • latest posts

      • Querying block device sizes in Python on Linux and Mac OS X February 4, 2023
      • Using jq to filter an array of objects from JSON September 9, 2019
      • Two Year Break — And we’re back! November 16, 2018
    • tags

      bitmath blog conference css dblatex DNS DocBook eclipse Emacs Erlang Fedora fedora 22 filter GNU Screen Haiku Introduction java jboss LCSEE Linux locale locales fix slicehost ubuntu Macports module nist nXML-Mode opengl open source OS X package packaging pki prefix units presentation project pypi Python scholarship si summit Tutorial ubuntu xcode XML XMPP
    • h4ck teh world

      tbielawatbielawa
      • Issue Comment
        bitmath
        February 6, 2023 - 12:55 am UTC
      • Issue Comment
        bitmath
        February 6, 2023 - 12:54 am UTC
      • Push
        bitmath
        February 6, 2023 - 12:51 am UTC
      • Issue Comment
        bitmath
        February 6, 2023 - 12:36 am UTC
      • Push
        bitmath
        February 6, 2023 - 12:30 am UTC

Creative Commons License
Technitribe by Tim Bielawa is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.