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.

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

Answers


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

Need Your Help

Jquery limit list elements, hide first-child after

jquery onchange listitem

What I want to achieve is to display ten list items and if next list element is clicked to hide first element, so the list will always be with ten elements

Pythonbrew cant install python 3.3?

python python-3.3 pythonbrew

I have installed multiple python versions using "pythonbrew install ". However, For python 3.3, I get the message :