css - 链接后的图标：用最后一个字打断

Question

如何在链接坚持最后一个字后制作图标：

div {
  background: #aaa;
  width: 120px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
  <span><a href="#">Many words here in this text breakWithTheIcons</a>&#xfeff;<i class="fa fa-heart"></i><i class="fa fa-music"></i>
  </span>
</div>

测试：http ://codepen.io/anon/pen/eJGMBr