なぜHTMLボタンの画像が縮小しないのですか？

Question

私は約1週間ほどこの問題を解消しようとしていましたが、最後の手段としてここで助けを求めています。私は、テキスト、チェックボックス、および2つのボタンを含む順序付けられていないリストを動的に構築するウェブサイトを持っています。各ボタンには画像が関連付けられています。ボタンは機能しますが、イメージは非常に大きく、リストの1つの「行」にも表示されません。私がやりたいのは何

Screenshot of Problem on Webpage

は、チェックボックスよりもわずかに大きいボタン画像を作成し、同じ行のテキスト、チェックボックス、および両方のボタンを持っています。また、チェックボックスとボタンを右揃えにし、テキストを左揃えにしておきたいと思います。

これは私が関数内で動的にリストにチェックボックスとボタンを追加しています方法です：

//Create the checkbox to add to the list element 
    var select_checkbox = document.createElement('input'); 
    select_checkbox.type = 'checkbox'; 
    select_checkbox.id = json[i].deck_ID; 

    //Add the checkbox to the list element 
    list_item.appendChild(select_checkbox); 

     //Create the delete button to add to the list element 
     var delete_button = document.createElement('button'); 
     delete_button.type = 'submit'; 
     delete_button.style = 'background-color:transparent; border-color:transparent;'; 
     delete_button.id = json[i].deck_ID; 
     delete_button.name = "delete_deck"; 
     delete_button.class = "icon"; 
     delete_button_image = document.createElement('img'); 
     delete_button_image.src = 'icons/trashcan.png'; 
     delete_button.appendChild(delete_button_image); 
     list_item.appendChild(delete_button); 

     //Create the delete button to add to the list element 
     var hide_button = document.createElement('button'); 
     hide_button.type = 'submit'; 
     hide_button.style = 'background-color:transparent; border-color:transparent;'; 
     hide_button.id = json[i].deck_ID; 
     hide_button.name = (json[i].hidden=='1')?"unhide_deck":"hide_deck"; 
     hide_button.title = (json[i].hidden=='1')?"Unhide Deck":"Hide Deck"; 
     hide_button.class = "icon"; 
     hide_button_image = document.createElement('img'); 
     hide_button_image.src = 'icons/unhidden_eye.png'; 
     hide_button.appendChild(hide_button_image); 
     list_item.appendChild(hide_button); 

私はdelete_button.setAttribute(...)で固定幅と高さを設定しようとしましたが、それはサイズを変更しませんでした。私はCSSのボタンのサイズを変更しようとしましたが、同様のスタイルを使って幅と高さを固定しました。私は画像自体のサイズを縮小しようとしましたが、無駄にしました。リストはHTMLページ上にあるのはここです：

<div class="container" id="container"> 
    <div class="row" id="row"> 
     <div class="col-sm-4" id="faculty"> 
      <ul id="faculty_list" class="list-unstyled"></ul> 
     </div> 
     <div class="col-sm-4" id="student"> 
      <ul id="student_list" class="list-unstyled"> </ul> 
     </div> 
    </div> 
</div> 

私は順不同リストのために、今多くのCSSを持っていない：

ul{ 
    text-align: left; 
} 

Answer 1

このJSFiddleを見てみましょう：https://jsfiddle.net/timhjellum/jhdk2reg/

あなたは、ボタンの幅と高さを設定し、カバーする背景画像を設定する必要があります

.icon { 
    width: 100px; 
    height: 50px; 
    background-image: url('http://placehold.it/350x150'); 
    background-size:cover; 
    background-position: center; 
    float: left; 
    }