font-awsome - создание большого значка с текстом, расположенным под ним, с использованием: до

Question

Можно ли это сделать с помощью шрифта значка и: раньше?

Цель: большая иконка с центром в div с текстовой меткой, расположенной под ней.

Старый способ, которым я бы это сделал, - это фоновое изображение и отступы, чтобы сделать изображение выше содержимого div.

Предпочитаете использовать шрифт значка. Отображение значка слева от текста достаточно просто, используя: before, но можно ли отображать его выше?

Спасибо.

EDIT: У меня нет коды, кроме болотного стандартного использования значка шрифта:

.mydiv:before { content: "\f11c "; /* this is the Unicode for the icon */ font-family: FontAwesome; margin-right: .2em; }

это помещает значок Befor текста. Даже не знаю, можно ли вместо этого позиционировать его выше.

Answer 1

Это может быть что-то вроде этого?

.mydiv { 
    font-family: sans-serif; 
    width: 120px; 
    padding: 10px 0; 
    text-align: center; 
    border: 1px solid #000; 
    border-radius: 3px; 
    background: #333; 
    color: #fff; 
} 

.mydiv:before { 
    content: "\f11c ";  
    font-family: FontAwesome; 
    display: block; 
    margin-right: .2em; 
    text-align: center; 
} 

http://jsfiddle.net/4W8dg/