it-swarm.asia

توسيط أيقونات FontAwesome رأسياً وأفقياً

أنا أستخدم حاليًا FontAwesome ، وأواجه وقتًا عصيبًا في توسيط الأيقونات رأسياً وأفقياً في الحاوية الخاصة بهم. لقد حاولت القيام بذلك عن طريق تحديد المواقع وواجهت مشاكل قبل الميلاد كانت أحجام الرموز مختلفة. لدي أساسا الأفقي ، وأحاول الحصول على العمودي.

<div class='container'>
    <div class='row'>
        <div class='offset2 span6 loginContainer'>
            <div class='row'>
                <div class='login-icon'>    
                    <i class='icon-user'></i>
                </div>
                <input type="text"  placeholder="Email" />

            </div>
            <div class='row'>
                <div class='login-icon'><i class=" icon-lock "></i></div>
                <input type="password" class="" placeholder="Password" />
            </div>
        </div>
    </div>
</div>

.login-icon{
    font-size: 40px;
    line-height: 40px;
    background-color:black;
    color:white;
    width: 50px;
    height: 50px;

}
.login-icon [class*='icon-']{
  height: 50px;
  width: 50px;
  display: inline-block;
  text-align: center;
  vertical-align: baseline;
}

http://jsfiddle.net/ncapito/e2UPC/

39
Nix

هذا هو كل ما تحتاجه ، لا حاجة إلى غلاف:

.login-icon{
    display:inline-block;
    font-size: 40px;
    line-height: 50px;
    background-color:black;
    color:white;
    width: 50px;
    height: 50px;
    text-align: center;
    vertical-align: bottom;
}

http://jsfiddle.net/e2UPC/6/

43
koala_dev

لقد استخدمت تحويل لتصحيح الإزاحة. إنه يعمل بشكل رائع مع الرموز المستديرة مثل حلقة الحياة.

<span class="fa fa-life-ring"></span>

.fa {
    transform: translateY(-4%);
}
15
Phuc Le

إذن ، أخيرًا حصلت عليها ( http://jsfiddle.net/ncapito/eYtU5/ ):

.centerWrapper:before {
    content:'';
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

.center {
    display:inline-block;
    vertical-align: middle;
}

<div class='row'>
    <div class='login-icon'>
        <div class='centerWrapper'>
            <div class='center'> <i class='icon-user'></i></div>
       </div>
    </div>
    <input type="text" placeholder="Email" />
 </div>
7
Nix

أنا فقط خفضت الارتفاع إلى 28 بكسل على .login-icon [class * = 'icon-'] إليك الحيلة: http://jsfiddle.net/mZHg7/

.login-icon [class*='icon-']{
    height: 28px;
    width: 50px;
    display: inline-block;
    text-align: center;
    vertical-align: baseline;
}
1
AdamSchuld

لقد تمكنت فقط من توسيط الرموز وجعلها حاوية بدلاً من وضعها في واحدة.

.fas {
    position: relative;
    color: #EEE;
    font-size: 16px;
}
.fas:before {
    position: absolute;
    left: calc(50% - .5em);
    top: calc(50% - .5em);
}
.fas.fa-icon {
    width: 60px;
    height: 60px;
    color: white;
    background-color: black;
}
0
Kardaw

إذا كنت تستخدم Twitter Bootstrap ، فأضف مركز نص الفصل إلى الكود الخاص بك.

<div class='login-icon'><i class="icon-lock text-center"></i></div>
0
Jeremiah Fries