Использования значка FontAwesome в кнопке загрузки рядом с «Скачать» текст

Question

Я ищу, чтобы попытаться выполнить этот взгляд на мою кнопку загрузки:

this http://instasermon.wpengine.com/wp-content/uploads/2016/12/Screen-Shot-2016-12-18-at-8.18.12-PM.png

Я использую этот код для моей кнопки загрузки

<input type="button" class="btn btn-primary" id="download" value=" download"/> 

Но нужно добавить иконку FontAwesome скачать слева «Загрузить» текст внутри кнопки

fa-download 

скачать

Вышеупомянутый код значка FontAwesome.

Я нашел Fiddle на другую должность, которая была похож на то, что я ищу, за исключением, когда я пытаюсь вставить свой фа-код для загрузки фронта FontAwesome, он не работает

Answer 1

Внешних ресурсов, которые вы используете вызывают проблему. вы можете использовать HTTP перед ним, а не по протоколу HTTPS

удалить два CDN вы используете для шрифта awesome.css и bootstrap.no-icons.min.csss и попробовать эти две КДС

https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap.no-icons.min.css https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

Во-вторых, используйте значки fa в теге. это более гибкий для применения CSS на них: как этот

<button type="submit" class="btn btn-primary"><i class="fa fa-download"></i> Download</button> 

здесь является рабочим fiddle. и вот рабочий фрагмент

var radio_x86 = document.getElementById('x86'); 
 
var radio_x64 = document.getElementById('x64'); 
 

 
var button = document.getElementById('download'); 
 

 
button.onclick = downloadFile; 
 

 
function downloadFile() { 
 
    if(radio_x86.checked) { 
 
     window.open("http://www.rarlab.com/rar/wrar500.exe"); 
 
    }else if(radio_x64.checked) { 
 
     window.open("http://www.rarlab.com/rar/winrar-x64-500.exe"); 
 
    } else { 
 
     alert("Please check one of the options first."); 
 
    } 
 
}

input[type="radio"], 
 
input[type="checkbox"] { 
 
    display:none; 
 
} 
 

 
input[type="radio"] + span:before, 
 
input[type="checkbox"] + span:before { 
 
    font-family: 'FontAwesome'; 
 
    padding-right: 3px; 
 
    font-size: 20px; 
 
} 
 

 
input[type="radio"] + span:before { 
 
    content: "\f10c"; /* circle-blank */ 
 
} 
 

 
input[type="radio"]:checked + span:before { 
 
    content: "\f058"; /* circle */ 
 
} 
 

 
input[type="checkbox"] + span:before { 
 
    content: "\f058"; /* check-empty */ 
 
} 
 

 
input[type="checkbox"]:checked + span:before { 
 
    content: "\f058"; /* check */ 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap.no-icons.min.css" rel="stylesheet"/> 
 
<label for="x86"> 
 
    <input type="radio" name="download" id="x86" /> 
 
    <span>winrar x86</span> 
 
</label> 
 

 
<label for="x64"> 
 
    <input type="radio" name="download" id="x64" /> 
 
    <span>winrar x64</span> 
 
</label> 
 

 
<button type="submit" class="btn btn-primary"><i class="fa fa-download"></i> Download</button>

Answer 2

<button type="submit" class="btn btn-primary"><i class="fa fa-download" aria-hidden="true"></i><span>Download</span></button> 

Добавьте срок или вы столкнетесь с проблемами укладка вещь. Кроме того, я не уверен, что ответ на первый вопрос заключается в том, как это делается на земле Bootstrap, но Bootstrap оскорблен в сообществе доступности по уважительным причинам. НЕ удаляйте скрытую арию или вы будете читать бессмысленную тарабарщину для пользователей прошивки. Это очень хорошо объясняется на веб-сайте Font Awesome.

Удачи и получайте удовольствие.