아이콘의 크기가 올바르지 않습니다. (글꼴 썸)

방금 전에 시작한 홈페이지에서 Font Awesome으로 작업하기 시작했습니다.아이콘의 크기가 올바르지 않습니다. (글꼴 썸)

지금은 일부 소셜 네트워크를 구현하려고합니다. 지금까지는 facebook und Co.에서 잘 작동하지만 XING이라는 한 네트워크에 문제가 있습니다.

<div class="i_iconsoc"><a href="#"><i class="fa fa-linkedin"></i></a></div>

그리고 내가 XING에 사용하는 작업은 다음과 같습니다 :

<div class="i_iconsoc"><a href="#"><i class="fa fa-xing"></i></a></div>

이 모두 나에게 동일하게 보이지만, 어떻게 든이 다음과 같이 표시됩니다 : 나는 링크드에 사용하는 코드의

http://i.stack.imgur.com/81WN9.png

문제를 해결할 수 있습니까? 그것은 CSS 파일 btw의 코드입니다. 모든 font-을 포함, 아이콘에 사용되는 글꼴 크기를 넣을 수 있습니다 .fa, 내가 사용상 특성

.fa { 
    display: inline-block; 
    font-family: FontAwesome; 
    font-style: normal; 
    font-weight: normal; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
}

이 fontello 사용하는 것을 수정하려고 할 것입니다 :

 .fa-xing 
{ 
    background:#68d49a; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease-in-out; 
    -o-transition: all 0.5s ease-in-out; 
    -ms-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out; 
    }

출처

2013-12-23 Jaypi

아이콘 폰트라는 ATTRIB이 당신이 사용하는 경우 최고와 다른 글꼴은이 이런 짓을 했을까 :

.youritem.icon-linkedin:before{ 
content: '\e808'; 
//your font-size 
font-size: 23px; 
}

출처

2013-12-23 15:02:12 rsurjano

감사합니다 - 나는 마지막으로 ... .fa - 트위터, .fa - 싱, .fa - 링크드 인 {패딩 : 11px를;} 그것을 발견 .fa - 페이스 북 ->이 이유 있었다! – Jaypi

오! 사실입니다, 내 대답은 당신을 도왔습니다. 그래서 ... 여백 재설정을 잊지 마세요. – rsurjano

ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    } 
 
ul li { 
 
    list-style: none; 
 
    float: left; 
 
    margin-left: 5px; 
 
    } 
 
ul li a { 
 
    text-decoration: none; 
 
    padding: 8px 12px; 
 
    color: #FFF; 
 
    background: #545454; 
 
    font-size: 25px; 
 
    border-radius: 50%; 
 
    transition: color 0.3s ease-in-out; 
 
    -webkit-transition: color 0.3s ease-in-out; 
 
    } 
 
ul li a:hover { 
 
    color: #C86565; 
 
    } 
 

 
.fa-color1 { 
 
    color: #0095FF; 
 
    margin-left: 4px; 
 
    transition: color 0.3s ease-in-out; 
 
    -webkit-transition: color 0.3s ease-in-out; 
 
    } 
 
.fa-color1:hover { 
 
    color: #6BC5EB; 
 
    }

<head> 
 
<meta charset="utf-8" /> 
 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
 
<title>font</title> 
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
 
<!-- Bootstrap --> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"> 
 

 

 
<link href="https://fonts.googleapis.com/css?family=Squada+One" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
<ul> 
 
    <li><a href="#"><i class="fa fa-facebook"></i></a></li> 
 
    <li><a href="#"><i class="fa fa-twitter"></i></a></li> 
 
    <li><a href="#"><i class="fa fa-github"></i></a></li> 
 
    </ul> 
 
    
 
    <br><br><br> 
 

 
    <a href="#"><i class="fa fa-facebook fa-2x fa-color1"></i></a> 
 
    <a href="#"><i class="fa fa-twitter fa-3x fa-color1"></i></a> 
 
    <a href="#"><i class="fa fa-github fa-4x fa-color1"></i></a> 
 
</body>

,536,913 63,210

출처

2016-09-15 09:45:04 hamidrun

코드와 함께 몇 가지 설명을 추가해주십시오. –

다음 링크를 참조하십시오. http://fontawesome.io/examples/#larger – hamidrun

아이콘의 크기가 올바르지 않습니다. (글꼴 썸)

답변

관련 문제