Значки стека в fontawesome

Я отображать значки сетки, используя шрифт удивительный рамки. Есть ли способ укладки значков, чтобы я мог отображать значок сетки 3x2?Значки стека в fontawesome

Demo Jsfiddle

<a href="./"><i class="fa fa-square"></i> 1x1</a> 
<a href="./" ><i class="fa fa-square"></i><i class="fa fa-square"></i> 2x1</a> 
<a href="./"><i class="fa fa-th-large"></i> 2x2</a> 
<a href="./"><i class="fa fa-th-large"></i> 3x2</a> << can not create 3 x 2 
<a href="./"><i class="fa fa-th"></i> 3x3</a>

источник

2016-05-18 Anonymous

Вы говорите об этом: http://fontawesome.io/examples/#stacked – Justinas

Я не думаю, что это сработает. Может быть, с отрицательной маржой и т. Д. Но это не так ясно, как должно быть. Я бы сам создал этот значок и включил его в качестве изображения или значка. – m1crdy

ссылаются на макет сетки начальной загрузки, https: //getbootstrap.com/examples/grid/ – dreamweiver

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

<a href="./"><i class="fa fa-th-large"></i><i class="fa fa-th-large"></i> 3x2</a> 

.fa-th-large ~ .fa-th-large{ 
    margin-left: -8px; 
}

источник

2016-05-18 07:11:07

Хорошая идея! Но что такое 'left: -6px; позиция: относительная; '? –

Не уверен, что вы имеете в виду, просто скремблировал быстрый пример, который близок к тому, что действительно нужно OP, теперь, когда они знают, как они могут это сделать, я уверен, что они разрешат это :) –

Извините за неопределенность :) Я хотел сказать о '.fa-th-large ~ .fa-th-large {left: -7px; позиция: относительная; } Значок становится более аккуратным для моего вкуса. http://jsfiddle.net/glebkema/bnwajmhc/ –

Вы должны сделать некоторый запас левый трюк здесь, чтобы работать вокруг, как этот

Ваш HTML код (для значка 3х2)

<a href="./"><i class="fa fa-th-large"></i><i class="fa fa-th-large over-lap"></i> 3x2</a>

относительный код CSS будет например,

.over-lap{ 
    margin-left:-7px; 
}

Что вам нужно?

Добавить другой значок 2х2
создать класс с некоторым запасом левого трюка (здесь, который Игнорирует Защиту Щита круга с отрицательным левым краем)
Применить этот класс на второй значок, это все . (изменить маржу в соответствии с вашими требованиями.)

источник

2016-05-18 07:21:37

Довольно много копий макароны моего ответа, а? –

Извините за это, но дело не в этом. Когда я открыл окно с комментариями, был занят другой работой и позже вернулся в окно комментария. Между тем вы отправили с таким же ответом. –

Я удалю ответ. :-) –

Значки стека в fontawesome

ответ

Смежные вопросы