Add space before the anchor tag using Rails link_to and font awesome gem

Question

For some reason I cannot apply CSS to my link_to in order to add spacing for my icon.

I have the following set up in Slim:

.col-md-3.offset-md-6.something
 = link_to 'Sign In', 'www.website.com', target: '_blank', id: 'something', class: 'fa fa-lock btn btn-sign btn-md'

I've tried the following:

#something a::before {
  content: 'f023 \00a0;'
}
.something a::before {
  content: 'f023 \00a0;'
}
.fa-lock {
  content: 'f023 \00a0' !important;
}

Since I'm using the font awesome gem I can't target i like referenced elsewhere.

What it actually displays in the page is:

<a target="_blank" id="something" class="fa fa-lock btn btn-sign btn-md href="www.website.com">
 ::before
"Sign In"
</a>

Heck I even tried using:

= link_to ' Sign In', 'www.website.com'

This just displays the

& nbsp;Sign In

Answer 1

= link_to ' Sign In', 'www.website.com'

You are passing HTML entity to be rendered. You would have to call html_safe on that string:

= link_to ' Sign In'.html_safe, 'www.website.com'

About applying CSS - there is no a inside #something . There is a#something . You can try applying CSS to the before by using:

a#something::before {
  content: 'f023 \00a0;'
  // your custom CSS
}

I hope it helps.

Answer 2

You need to set a value for display . Also, I think you need to escape the value for your icon glyph:

.something a::before {
  display: inline-block;
  content: '\f023\00a0';
}

Answer 3

So there were a bunch of issues with the font-family being changed and other formatting issues so I ended up with:

      .col-md-3.offset-md-6
        = link_to 'www.website.com',
        target: '_blank', id: 'something', class: 'btn btn-sign btn-md', style: 'color:white;' do
       div
        =fa_icon 'lock'
        p[style="display:inline; padding-left:15px;"] Sign In

Had to lean into the font awesome gem, apply inline styling as it wasn't being picked up in my SCSS file for whatever reason, and put more styling in the anchor.