对齐按钮

Question

我在网络上尝试了很多不同的东西，从SO开始，似乎无法让它发挥作用。我第一次改变/设计我的按钮，他们让我疯了！所以我现在在右侧浮动按钮的同一行上有一个左浮动按钮。我想知道我是否可以在左侧按钮的文本左侧和右侧按钮上的文本右侧显示图标。像这样：

＆lt; - 最后一页////////////////////////////////////////// //////下一页 - ＆gt;

<span align="right">
<ul class="actions">
<li id="leftbutton"><a href="tfn.html" class="button special icon fa-arrow-left">TFN</a></li>
<li id="rightbutton"><a href="medical-indemnity-and-insurance.html" class="button special icon fa-arrow-right">Indemnity & Insurance</a></li>
</ul>
</span> 

Fiddle

由于某种原因，上面的小提琴似乎没有显示字体真棒箭头？

非常感谢你！

S上。

Answer 1

只需在<i>元素中插入te font-awsome图标：

<span align="right">
  <ul class="actions">
     <li id="leftbutton"><a href="tfn.html" class="button special icon"><i class="fa fa-arrow-left" aria-hidden="true"></i> TFN</a></li>
     <li id="rightbutton"><a href="medical-indemnity-and-insurance.html" class="button special icon ">Indemnity & Insurance <i class="fa fa-arrow-right" aria-hidden="true"></i></a></li>
  </ul>
</span>

这是一个更新的小提琴：https://jsfiddle.net/n6bpvdf5/1/

Answer 2

课程将icon fa-arrow-right而不是<a href="tfn.html" class="button special fa fa-arrow-left">TFN</a> 。

<强>像 <i>

使用字体真棒图标

时，最好使用<a href="tfn.html" class="button special"><i class="fa fa-arrow-left" aria-hidden="true"></i>TFN</a> 标记

<强>像 CREATE TABLE chat_matches( chat_id uuid, from_id bigint, to_id bigint, message text, message_send_time timestamp, PRIMARY KEY ((chat_id,from_id),message_send_time) );