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

删除你用于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。这是一个工作片段

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网站上得到了很好的解释。

祝你好运，玩得开心。

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

2 个答案: