结合两个字体真棒图标

我想结合两个字体真棒图标来创建一个堆栈。我试图合并fa-calendar和fa-clock-o图标。这是因为我需要一个日期时间的图标。结合两个字体真棒图标

因此，为了把它们结合在一起，我想这一点：

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来清除和清除 –

结合两个字体真棒图标

回答

相关问题