Выровнять шрифт Удивительные значки (fa-2x) со сложными значками (fa-stack)

Я пытаюсь выровнять 4 значка в строке для общего доступа к веб-сайту. Когда я использовал 4 обычных значка, они выровнялись идеально и были одинакового размера. Теперь я пытаюсь, чтобы один из них был уложен так, что у него есть граница, и это создает некоторые проблемы.

Ниже приведен код, с которым я играл:

<div class="share-results">
  <a class="fa fa-2x fa-envelope-o" data-toggle="tooltip" title="Share by Email" data-placement="top" href="#"></a>
  <a class="fa fa-2x fa-facebook-square" data-toggle="tooltip" title="Share on Facebook" data-placement="top" href=""></a>
  <a class="fa fa-2x fa-twitter-square" data-toggle="tooltip" title="Share on Twitter" data-placement="top" href=""></a>
  <a class="fa fa-2x fa-stack" data-toggle="tooltip" title="Share by Link" data-placement="top" href="#">
    <i class="fa fa-square-o fa-stack-2x"></i>
    <i class="fa fa-link fa-stack-1x"></i>
  </a>
</div>

Это создает:

Кажется, что есть только проблема с размером, поэтому я играл с использованием fa-lg:

А также без помощника по калибровке на сложном элементе:

Кто-нибудь знает, как выровнять значок с помощью fa-2x с помощью сокетов?

Ответ 1

Существует способ выполнить эту задачу с минимальным использованием новых стилей CSS:

Мы должны использовать конверт, который имеет тот же стиль, что и твиттер и facebook, я имею в виду квадратный стиль с классом fa-envelope-square. И сделайте все привязанные элементы сложены:

<div class="share-results">
    <a class="fa-stack fa-1x" data-toggle="tooltip" title="Share by Email" data-placement="top" href="#">
        <i class="fa fa-envelope-square fa-stack-2x"></i>
    </a>
    <a class="fa-stack fa-1x" data-toggle="tooltip" title="Share on Facebook" data-placement="top" href="">
        <i class="fa fa-facebook-square fa-stack-2x"></i>
    </a>
    <a class="fa-stack fa-1x" data-toggle="tooltip" title="Share on Twitter" data-placement="top" href="">
        <i class="fa fa-twitter-square fa-stack-2x"></i>
    </a>
    <a class="fa-stack fa-1x" data-toggle="tooltip" title="Share by Link" data-placement="top" href="#">
        <i class="fa fa-square fa-stack-2x"></i>
        <i class="fa fa-inverse fa-link fa-stack-1x"></i>
    </a>
</div>

В дополнение к этому мы меняем разницу между сложными элементами, чтобы они выглядели как в вашем примере:

.fa-stack { margin: -2px; }

Результат будет выглядеть так:

Демо-скрипт

Ответ 2

Я не мог найти долговременное решение, используя только классы fa- *, но я придумал пару способов сделать это, которые, по общему признанию, немного взломаны, но не ужасно хакерские.

Первый подход накладывает значок fa-link, как текст, на обычный значок fa fa-2x fa-square-o.

<div class="share-results">
  <a class="fa fa-2x fa-envelope-o" data-toggle="tooltip" title="Share by Email" data-placement="top"></a>
  <a class="fa fa-2x fa-facebook-square" data-toggle="tooltip" title="Share on Facebook" data-placement="top"></a>
  <a class="fa fa-2x fa-twitter-square" data-toggle="tooltip" title="Share on Twitter" data-placement="top"></a>
  <a class="fa fa-2x fa-square-o stacked" data-toggle="tooltip" title="Share by Link" data-placement="top"></a>
</div>

<style>
    .stacked {
        position:relative;
    }   
    .stacked:after {
        position: absolute;
        font-family: FontAwesome;
        font-size: .6em;
        top:6px;
        left:4px;
        content: "\f0c1"; /*link icon*/
    }
</style>

Второй подход использует комбинацию position: fixed и пользовательский font-size, чтобы помочь новой ссылке выравниваться немного лучше:

<div class="share-results">
  <a class="fa fa-2x fa-envelope-o" data-toggle="tooltip" title="Share by Email" data-placement="top"></a>
  <a class="fa fa-2x fa-facebook-square" data-toggle="tooltip" title="Share on Facebook" data-placement="top"></a>
  <a class="fa fa-2x fa-twitter-square" data-toggle="tooltip" title="Share on Twitter" data-placement="top"></a>
  <a class="fa fa-2x fa-stack stacked2" data-toggle="tooltip" title="Share by Link" data-placement="top">
    <i class="fa fa-square-o fa-stack-2x"></i>
    <i class="fa fa-link fa-stack-1x"></i>
  </a>
</div>

<style>
    .stacked2 {
      position: fixed;
      font-size: 1.1em !important;
      top: -7px;
      left: -4px;
    }
</style>

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

И здесь Пример CodePen.

Я не уверен, отвечает ли это на ваш вопрос, но я надеюсь, что это немного поможет.

Ответ 3

Так как шрифт awesome icons - это все о ширинах, высотах и высотах линий, я попытался создать решение, в котором все их значения были одинаковыми (надеюсь) избегать путаницы и упростить обновление вперед.

Используя пример, который вы указали, я установил эти свойства CSS:

.fa {
    /*this sets values for all icons*/
    color: gray;
    font-size: 50px;
    line-height: 55px;
    text-decoration: none;
}
.fa-link {
    /*make inner icon smaller but keep line-height the same so its centered vertically*/
    font-size: 30px;
}
.fa-stack-cust {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 55px;
}

Я завернул значки в неупорядоченный список, и теперь они отображаются в одной строке. Вот JS.Fiddle, показывающий вам рабочий пример. Вы сможете увидеть изменения HTML, даже если они незначительны. Надеюсь, что это поможет.