부트 스트랩 아이콘으로 글꼴 멋진 아이콘 덮어 쓰기

글꼴 굉장한 "아이콘 사용자"아이콘을 부트 스트랩 아이콘으로 대체하는 방법은 무엇입니까?부트 스트랩 아이콘으로 글꼴 멋진 아이콘 덮어 쓰기

<head> 
    <meta charset="utf-8"> 
    <title>Blah Blah Blah</title> 

    <link href="assets/css/bootstrap.css" rel="stylesheet"> 
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans"> 
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:bold"> 

    <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css"> 

    <link rel="shortcut icon" href="favicon.png"> 
</head>

출처

2013-05-20 John Smith

에 사양을 참조하십시오이

<style type="text/css">  
.icon-user:before { 
    content: ""; 
} 
.icon-user {background-image: url("url/to/your/bootstrap/img/glyphicons-halflings.png"); width: 14px; display: inline-block; background-position: -168px 0;} 
</style>

출처

2013-05-20 18:51:41 Nagarjun

작동하지 않았습니다. : –

내 업데이트 된 답변보기 – Nagarjun

고마워. :) –

가장 간단한 방법은 스타일 시트의 순서를 변경하는 것입니다 :

이

내 헤더입니다. 위의 규칙이 더 구체적이지 않으면 last라는 이름이 우선합니다. 글꼴 멋진 실제로 부트 스트랩을 무시하기 때문에 머리 태그를 닫기 전에 캐스 케이 딩 스타일 http://www.w3.org/TR/CSS21/cascade.html

출처

2013-05-20 18:51:38

추가, 당신은 대체를 재정의해야합니다.

Fontawesome는 아이콘 클래스에 CSS의 무리를 추가하지만 가장 중요한은 다음과 같습니다

[class^="icon-"], [class*=" icon-"] { 
display: inline-block; 
width: 14px; 
height: 14px; 
margin-top: 1px; 
line-height: 14px; 
vertical-align: text-top; 
background-image: url("../img/glyphicons-halflings.png"); 
background-position: 14px 14px; 
background-repeat: no-repeat; 
}

당신은 다시 그들이 무엇인지하도록 설정해야합니다

[class^="icon-"], [class*=" icon-"] { 
font-family: FontAwesome; 
background-image: none; 
background-position: 0 0; 
background-repeat: repeat; 
}

,이 원본입니다

하지만 가장 중요한 것은 각 부트 스트랩 아이콘에 특정 위치 지정이 있다는 것입니다. 다시 설정해야합니다.

.icon-user { 
background-position: -168px 0; 
}

출처

2013-05-20 18:58:35 pixelearth

다른 글꼴 - 멋진 아이콘을 사용하지 못하도록하지 않겠습니까? –

font-awesome.min.css을 변경해 보셨습니까? 아이콘 사용자에 대해 "찾기"를 수행하고 거기에있는 CSS를 주석 처리하십시오. 그것은 단지 글꼴 멋진 아이콘을 숨기고 아마도 그 장소에 부트 스트랩 하나를 보여 주어야합니다. 덮어 쓸 사람이 없다면 다른 사람은 다른 사람을 덮어 쓰지 않습니다.

.icon-user:before{content:"\f007"}

출처

2013-05-20 19:22:04 ntgCleaner

나는 그것을 시험해 보았다. 그것은 작동하지 않았다. –

부트 스트랩 아이콘으로 글꼴 멋진 아이콘 덮어 쓰기

답변

관련 문제