CODEWITHSUNDEEP
ruby-on-rails-3twitter-bootstrap
simo
simo

Reputation: 24560

rails 3.2, twitter bootstrap why width of buttons with icons is not correct?

I am trying to add an icon next to a button, the icon appears, but, the location is wrong, and the button total width is wrong too, please check the image bellow, I tried to set the width of the red button, but, the icon still appear on the button text.

enter image description here

here is haml code I've used:

= link_to new_class_room_path, {:class=>'btn btn-primary'} do
  %i{:class=>'icon-plus'}
    %span
      New Class Room

%a{:class=>"btn btn-danger", :ref=>"#", :style=>'width: 200px;'}
  %i{:class=>"icon-trash icon-white"}
    Delete

Any one can tell me what I am missing here ? p.s: if I do not use icons, the button will appear normally with correct width

Upvotes: 0

Views: 1694

Answers (1)

Mark Paine
Mark Paine

Reputation: 1894

You've nested your text inside of your icons.

Instead of:

= link_to new_class_room_path, {:class=>'btn btn-primary'} do
  %i{:class=>'icon-plus'}
    %span
      New Class Room

%a{:class=>"btn btn-danger", :ref=>"#", :style=>'width: 200px;'}
  %i{:class=>"icon-trash icon-white"}
    Delete

Use:

= link_to new_class_room_path, {:class=>'btn btn-primary'} do
  %i{:class=>'icon-plus'}
  %span
    New Class Room

%a{:class=>"btn btn-danger", :ref=>"#", :style=>'width: 200px;'}
  %i{:class=>"icon-trash icon-white"}
  Delete

Upvotes: 4

Related Questions