在“下载”文本旁边的下载按钮中使用 FontAwesome 图标答案

【问题标题】：Using FontAwesome icon in download button next to "Download" text在“下载”文本旁边的下载按钮中使用 FontAwesome 图标
【发布时间】：2016-12-19 01:47:33
【问题描述】：

我正在尝试为我的下载按钮完成这个外观：

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"/>

但需要在下载按钮内的“Download”文本左侧添加FontAwesome下载图标

fa-download

上面是 FontAwesome 图标代码。

我在另一个帖子上找到了一个Fiddle，这与我正在寻找的内容相似，但当我尝试在 FontAwesome 前面插入我的 fa 下载代码时，它不起作用

【问题讨论】：

尝试使用按钮，如下所示：jsfiddle.net/uv8ej0nb/2

标签： html css button font-awesome

【解决方案1】：

您使用的外部资源导致了问题。你可能在它前面使用 http 而不是 https

删除您用于 font-awesome.css 和 bootstrap.no-icons.min.csss 的两个 cdn 并尝试这两个 cdn

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-icons。在它们上应用 css 更灵活：像这样

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

这是一个有效的fiddle。这是一个有效的sn-p

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>

【讨论】：

【解决方案2】：

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

添加跨度，否则您将在样式设置时遇到麻烦。另外，我不确定第一个人的答案是否是它在 Bootstrap 领域的表现，但 Bootstrap 在可访问性社区中受到谴责是有充分理由的。不要删除 aria-hidden，否则您将向屏幕阅读器用户阅读无意义的胡言乱语。这在 Font Awesome 网站上有很好的解释。

祝你好运，玩得开心。

【讨论】：