Объединить два значка шрифта Awesome

Я пытаюсь объединить два значка шрифта Awesome, чтобы создать стек. Я пытаюсь объединить fa-calendar и fa-clock-o иконки. Это потому, что мне нужен значок для даты-времени.Объединить два значка шрифта Awesome

Итак, для того, чтобы объединить их, я попытался это:

HTML

<span class="icon-stack"> 
    <i class="fa fa-calendar icon-stack-3x"></i> 
    <i class="fa fa-clock-o icon-stack-1x"></i> 
</span>

CSS

.icon-stack { 
    position: relative; 
    display: inline-block; 
    width: 2em; 
    height: 5em; 
    line-height: 4em; 
    vertical-align: middle; 
} 
.icon-stack-1x, 
.icon-stack-2x, 
.icon-stack-3x { 
    position: absolute; 
    left: 0; 
    width: 100%; 
    text-align: center; 
} 
.icon-stack-1x { 
    line-height: inherit; 
} 
.icon-stack-2x { 
    font-size: 1.5em; 
} 
.icon-stack-3x { 
    font-size: 2em; 
}

Это то, что я получаю в результате.

enter image description here

Но я хочу, чтобы принести немного вправо. Я не знаю, как это сделать? Что я могу сделать, чтобы немного поправить это?

источник

2016-11-15 SSS

Ну, как вы сделали свой собственный CSS для позиция вам просто нужно установить text-align в right, как это:

.icon-stack-3x { 
    position: absolute; 
    left: 0; 
    width: 100%; 
    text-align: right; 
}

Here is a working example

Проблема заключается в том, что не выглядит большим. Итак, вот несколько альтернатив в случае, если они вам полезны: Example 1, Example 2

источник

2016-11-15 12:58:15 musefan

Это работает, как я могу сделать его более понятным? т.е. выглядит немного противно, чтобы он выглядел хорошо. Любая помощь в этом? – SSS

@ duddosai: Да, я попытался, но проблема в том, что у них нет значка часов, который не прозрачен (что является проблемой). Почему бы вам не попробовать другой календарь? [возможно, что-то вроде этого] (http://jsfiddle.net/exg492n2/1/), хотя я использовал абсолютную позицию, которая иногда может быть проблематичной, особенно с разными браузерами. Вместо этого вы можете попробовать использовать встроенные классы стекирования [и сделать это просто так) (http://jsfiddle.net/exg492n2/2/) – musefan

Спасибо, чувак, подумайте, что это может сработать. В любом случае, спасибо. – SSS

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

.icon-stack { 
 
     position: relative; 
 
     display: inline-block; 
 
     width: 2em; 
 
     height: 5em; 
 
     line-height: 4em; 
 
     vertical-align: middle; 
 
    } 
 
    .icon-stack-1x, 
 
    .icon-stack-2x, 
 
    .icon-stack-3x { 
 
     position: absolute; 
 
     left: 0; 
 
     width: 100%; 
 
     text-align: center; 
 
    } 
 
    .icon-stack-1x { 
 
     line-height: inherit; 
 
    } 
 
    .icon-stack-2x { 
 
     font-size: 1.5em; 
 
    } 
 
    .icon-stack-3x { 
 
     font-size: 2em; 
 
    } 
 
.right_align { padding-left:5px; }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> 
 
<span class="icon-stack"> 
 
    <i class="fa fa-calendar icon-stack-3x"></i> 
 
    <i class="fa fa-clock-o icon-stack-1x right_align"></i> 
 
</span>

источник

2016-11-15 12:57:58

Это помогает, но я хочу, чтобы он выглядел хорошо, как будто он должен быть ясным. Что может быть сделано? – SSS

Вы можете добавить свой собственный css для очистки и очистки –

Объединить два значка шрифта Awesome

ответ

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