«font-awesome» 태그된 질문

Font Awesome은 상징적 인 독립형 벡터 글꼴로, 처음에는 Twitter Bootstrap 프런트 엔드 프레임 워크와 함께 사용하기 위해 개발되었습니다.



15
React의 render ()에 Font Awesome 아이콘을 포함하는 방법
React의 Font Awesome 아이콘을 사용하려고 할 때마다 render()일반 HTML에서 작동하지만 결과 웹 페이지에 표시되지 않습니다. render: function() { return <div><i class="fa fa-spinner fa-spin">no spinner but why</i></div>; } 다음은 실제 예입니다. http://jsfiddle.net/pLWS3/ 결함은 어디입니까?

29
멋진 글꼴이 아이콘을 표시하지 않습니다
Font Awesome을 사용하고 있으며 HTTP로 CSS를 추가하고 싶지 않습니다. Font Awesome을 다운로드하여 코드에 포함했지만 Font Awesome에 아이콘 대신 테두리가있는 사각형 상자가 표시됩니다. 내 코드는 다음과 같습니다. <html> <head> <link rel="stylesheet" href="../css/font-awesome.css"> <link rel="stylesheet" href="../css/font-awesome.min.css"> </head> <body> <div style="font-size: 44px;"> <i class="fa fa-camera-retro fa-lg"></i> fa-lg <i class="fa fa-camera-retro fa-2x"></i> fa-2x </div> …
99 html  css  font-awesome 

4
모든 글리프의 너비가 동일한 지 어떻게 확인합니까?
동일한 글꼴 크기에서도 표준 너비가 없다는 것을 알았습니다. 단어가 들쭉날쭉하지 않도록 항목 목록 앞에 어떻게 사용할 수 있습니까? 문제의 스크린 샷 : 다음은 코드입니다. <ul id="myTab"> <li class="active"><a href="#home"><i class="icon-tasks"></i> Proposal</a></li> <li><a href="#video"><i class="icon-film"></i> Videos</a></li> <li><a href="#asset"><i class="icon-paper-clip"></i> Assets</a></li> <li><a href="#payment"><i class="icon-credit-card"></i> Payment</a></li> <li><a href="#history"><i class="icon-calendar empty"></i> History</a></li> </ul>

6
글꼴 멋진 아이콘을 정적으로 회전
글꼴 멋진 아이콘을 45 도씩 정적으로 회전하고 싶습니다. 사이트에 다음과 같이 나와 있습니다. 아이콘을 임의로 회전하고 뒤집으려면 fa-rotate- * 및 fa-flip- * 클래스를 사용하십시오. 그러나 <i class="fa fa-link fa-rotate-45" style="font-size:1.5em"></i> 교체 반면, 작동하지 않습니다 fa-rotate-45와 함께 fa-rotate-90한다. 이것은 실제로 그들이 임의로 회전 할 수 없다는 것을 의미합니까?

8
Font Awesome에서 SVG 추출
HTML에서 SVG로 바로 사용할 수 있도록 Font Awesome 글리프 에서 SVG 경로 데이터를 가져 오고 싶습니다. fontawesome-webfont.svg 에서 경로 데이터를 복사하여 붙여 넣는 것만 큼 쉬울 것이라고 생각 했지만 HTML에서 사용하면 기호가 모두 거꾸로 렌더링됩니다. 왜 그럴까요? ( Fiddle 참조 ) 글꼴 굉장 SVG : <glyph unicode="" horiz-adv-x="1408" d="M1408 131q0 …
92 html  svg  font-awesome 

8
입력 필드에 Font Awesome 아이콘을 어떻게 추가합니까?
Font Awesome에 포함 된 검색 아이콘을 입력에 사용하려면 어떻게하나요? 내 사이트 (PHPmotion 기반)에 검색에 사용하려는 검색 기능이 있습니다. 코드는 다음과 같습니다. <div id="search-bar"> <form method="get" action="search.php" autocomplete="off" name="form_search"> <input type="hidden" name="type" value="videos" /> <input autocomplete="on" id="keyword" name="keyword" value="Search Videos" onclick="clickclear(this, 'Search Videos')" onblur="clickrecall(this,'Search Videos')" style="font-family: verdana; font-weight:bold; font-size: 10pt; height: …
89 html  css  font-awesome 

7
사용 된 클래스에 대해서만 Font Awesome 최적화
나는 글꼴 최고 말대꾸 파일을 사용하고 https://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.sass를 가하도록 _font-awesome.sass을 내가 할 수있는, 그래서 @import내 말대꾸 프로젝트. 또한 http://middlemanapp.com/ 을 사용하여 Sass 를 Css 로 변환 합니다. 질문 : 사용 된 아이콘 클래스 만 변환 된 .css로 가져 오는 방법이 있습니까? 지금은 _font-awesome.sass의 모든 클래스를 전달했기 때문입니다. 보너스 : 사용 된 …
86 css  sass  font-awesome 

9
상대 경로를 사용하여 Webpack에서 SCSS (SASS)를 사용하여 멋진 글꼴을로드하려면 어떻게해야합니까?
내 node_modules 폴더에 font-awesome이 있으므로 다음과 같이 기본 .scss 파일로 가져 오려고합니다. @import "../../node_modules/font-awesome/scss/font-awesome.scss"; 하지만 Webpack 번들링 컴파일이 실패합니다. Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.eot font-awesome.scss 파일은 상대 경로 '../fonts/'를 참조하기 때문입니다. scss \ webpack에게 다른 파일을 @import하도록 지시하고 해당 파일의 폴더를 홈 폴더로 사용하여 상대 경로가 예상대로 작동하도록하려면 …

5
i 태그의 Alt 또는 제목 속성
나는 font-awesome을 사용 하고 다음과 같은 글꼴을 표시합니다. <i class="icon-lock"></i> 이것은 멋진 작은 자물쇠 기호를 표시합니다. 사용자가 그것이 정확히 무엇을 의미하는지 알기 위해 title 및 alt와 같은 속성을 추가하려고 시도했지만 아무 소용이 없었습니다. <i>이미지의 경우 alt와 링크의 제목과 동일한 작업을 실행하는 태그에 사용할 수있는 속성이 있습니까?

3
Twitter Bootstrap의 Font Awesome vs Glyphicons
저는 웹 개발 초보자이고 최근에 Twitter Bootstrap으로 작업하기 시작했습니다 . 이미 사용 방법을 알고있는 Glyphicon 을 사용 하고 있다는 것을 알고 있습니다. 그러나 나는 또한 Bootstrap을 위해 만들어 졌다고 말하는 Font Awesome 을 발견했습니다. 둘의 차이점은 무엇입니까? 하나는 다른 하나의 대안입니까? 아니면 다른 장소에서 사용해야합니까?

8
글꼴 (@ font-face)이 이미로드되었는지 확인하는 방법은 무엇입니까?
Font-Awesome을 사용하고 있는데 글꼴 파일이로드되지 않은 상태에서 아이콘이 로 나타납니다. 따라서 display:none파일이로드되지 않는 동안 이러한 아이콘이 있어야 합니다. @font-face { font-family: "FontAwesome"; src: url('../font/fontawesome-webfont.eot'); src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome') format('svg'); font-weight: normal; font-style: normal; } 이러한 파일이로드되었고 마침내 아이콘을 표시 할 수 있는지 어떻게 알 수 있습니까? …
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.