Rails : Font Awesome 사용
내 웹 디자이너가 멋진 글꼴에 추가 된 업데이트 된 글꼴 / 아이콘을 제공했습니다. 그는 이것을 로컬 글꼴 폴더에 넣었습니다. font-awesome.css 파일도 받았습니다.
fonts 폴더를 내 자산에 직접 복사하고 font-awesome.css를 자산 / 스타일 시트에 넣었습니다.
CSS가 내 코드에서 올바르게 참조되지만 글꼴 폴더의 아이콘이로드되지 않습니다.
모든 것이 올바르게로드되고 / 또는 글꼴 폴더가 참조되는지 확인하기 위해해야 할 일이 있습니까?
먼저 : 자산 경로 (config / application.rb)에 app / assets / fonts 추가
config.assets.paths << Rails.root.join("app", "assets", "fonts")
그런 다음 글꼴 파일을 / assets / fonts로 이동합니다 (먼저 폴더 생성).
이제 font-awesome.css의 이름을 font-awesome.css.scss.erb로 바꾸고 다음과 같이 편집하십시오. 변경 :
@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;
}
이에:
@font-face {
font-family: "FontAwesome";
src: url('<%= asset_path("fontawesome-webfont.eot") %>');
src: url('<%= asset_path("fontawesome-webfont.eot") + "?#iefix" %>') format('eot'), url('<%= asset_path("fontawesome-webfont.woff") %>') format('woff'), url('<%= asset_path("fontawesome-webfont.ttf") %>') format('truetype'), url('<%= asset_path("fontawesome-webfont.svg") + "#FontAwesome" %>') format('svg');
font-weight: normal;
font-style: normal;
}
마지막으로 모든 리소스가 올바르게로드되었는지 확인합니다 (Firebug 또는 Chrome Inspector 사용).
쉬운 방법은 추가, 지금이 gem "font-awesome-rails"당신에게 Gemfile하고 실행 bundle install.
그런 다음 application.css에 css 파일을 포함합니다.
/*
*= require font-awesome
*/
자동으로 자산 파이프 라인에 멋진 글꼴을 포함합니다. 끝난. 그것을 사용하기 시작하십시오 :)
자세한 정보는 font-awesome-rails 문서를 확인하십시오 .
나는 또 다른 대답을 제공합니다.이 대답에서는 보석이나 경로 또는 그러한 과잉 솔루션에 대해 걱정할 필요가 없습니다. 이 줄을 application.html.erb (또는 레이아웃 파일)에 붙여 넣기 만하면됩니다.
<head>
...
<link href="//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
Vicoar의 답변 외에도
Rails 4의 경우 CSS를 약간 다르게 변경해야합니다. font_url의 사용법에 유의하십시오.
@font-face {
font-family: "FontAwesome";
src: font_url('fontawesome-webfont.eot');
src: font_url('fontawesome-webfont.eot?#iefix') format('eot'), font_url('fontawesome-webfont.woff') format('woff'), font_url('fontawesome-webfont.ttf') format('truetype'), font_url('fontawesome-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
이제 다음 방법은 Font Awesome을 Rails와 통합하는 가장 쉬운 방법입니다.
SASS Ruby Gem
공식 Font Awesome SASS Ruby Gem을 사용하여 Font Awesome SASS를 Rails 프로젝트로 쉽게 가져올 수 있습니다.
애플리케이션의 Gemfile에 다음 행을 추가하십시오.
gem 'font-awesome-sass'
그리고 다음을 실행합니다.
$ bundle
이것을 Application.scss에 추가하십시오.
@import "font-awesome-sprockets";
@import "font-awesome";
추가 보석없이, Barebones Rails 6 및 Webpacker와 함께 font-awesome 4를 사용하는 방법, 글꼴 또는 CSS 파일을 앱에 복사하여 붙여넣고 다른 이상한 작업을 수행하는 방법 :
font-awesome npm 패키지 추가 — package.json :
{
"dependencies": {
"font-awesome": "4.7.0"
}
}
CSS 매니페스트 (app / stylesheets / application.css)에 멋진 글꼴 CSS 파일을 포함합니다.
/*
*= require font-awesome/css/font-awesome.min
*= require_tree .
*= require_self
*/
맞춤 CSS 파일 (app / stylesheets / font-awesome.css.erb)에서 글꼴 정의를 재정의합니다.
@font-face {
font-family: 'FontAwesome';
src: url('<%= font_path('fontawesome-webfont.eot') %>');
src: url('<%= font_path('fontawesome-webfont.eot') %>?#iefix') format('embedded-opentype'), url('<%= font_path('fontawesome-webfont.woff2') %>') format('woff2'), url('<%= font_path('fontawesome-webfont.woff') %>') format('woff'), url('<%= font_path('fontawesome-webfont.ttf') %>') format('truetype'), url('<%= font_path('fontawesome-webfont.svg') %>#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
node_modules font-awesome dir + 글꼴 파일 유형을 자산 파이프 라인에 포함 — config / initializers / assets.rb
Rails.application.config.assets.paths << Rails.root.join('node_modules/font-awesome/fonts')
Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/
글꼴이 포함되어 public / fonts 디렉토리에 컴파일되고 모든 항목 (앱 및 글꼴 멋진)이 컴파일 된 단일 CSS 파일이 제공됩니다.
The thing is, font-awesome minified css contains hardcoded paths to fonts and to override this we just adding font-face directive with generated fonts paths. Because of this, the font-awesome.min.css should be added first in the manifest file.
However, while everything will work fine, you'll get 404 errors in console. I wasn't managed to fix this and eventually gave up and switched to font-awesome-sass gem.
I have tried vicoar's , but it doesn't work on my project based on ruby 1.9.3 and rails 3.2. Then I rename the file name font-awesome.css to font-awesome.css.erb and change the @font-face to this:
@font-face {
font-family: "FontAwesome";
src: url(<%= asset_path 'fontawesome-webfont.eot' %>);
src: url(<%= asset_path 'fontawesome-webfont.eot' + '?#iefix' %>) format('eot'), url(<%= asset_path 'fontawesome-webfont.woff' %>) format('woff'), url(<%= asset_path 'fontawesome-webfont.ttf' %>) format('truetype'), url(<%= asset_path 'fontawesome-webfont.svg' + '#FontAwesome' %>) format('svg');
font-weight: normal;
font-style: normal;
}
It works very well and the code is very simple...(your can refer the guide asset_pipeline
Having just gone through this with Rails 5.2, I'd like to share how this works if you don't want to use the font-awesome-rails gem:
- Put the FontAwesome font files (EOT, WOFF, etc.) in a suitably named subfolder of /app/assets, /vendor/assets or /lib/assets, eg: /app/assets/fonts.
Add this line to config/initializers/assets.rb:
Rails.application.config.assets.paths << Rails.root.join("app", "assets", "fonts")
Rename FontAwesome's all.css to all.scss. If you don't do this, Rails won't pre-process the path references in the next step.
Replace all the paths to the font files with Rails pipeline references (ie. font-url or asset-url):
eg. before
@font-face { font-family: 'Font Awesome 5 Free'; font-style: normal; font-weight: 900; src: url("../webfonts/fa-solid-900.eot"); src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); }
eg. after
@font-face { font-family: 'Font Awesome 5 Free'; font-style: normal; font-weight: 900; src: asset-url("fa-solid-900.eot"); src: asset-url("fa-solid-900.eot?#iefix") format("embedded-opentype"), asset-url("fa-solid-900.woff2") format("woff2"), asset-url("fa-solid-900.woff") format("woff"), asset-url("fa-solid-900.ttf") format("truetype"), asset-url("fa-solid-900.svg#fontawesome") format("svg"); }
Restart the server.
For rails 3.2.* a quick solution:
1) Put the font awesome files in a "fonts" folder in the public folder 2) Open font-awesome.css and change the 4 entries for "../fonts" to "/fonts" at the top of the file
@font-face
{
font-family:'FontAwesome';
src:url('/fonts/fontawesome-webfont.eot?v=3.2.1');
src:url('/fonts/fontawesome-webfont.eot?#iefix&v=3.2.1')
format('embedded-opentype'),url('/fonts/fontawesome-webfont.woff?v=3.2.1')
format('woff'),url('/fonts/fontawesome-webfont.ttf?v=3.2.1')
format('truetype'),url('../fonts/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1')
format('svg');
font-weight:normal;
font-style:normal;
}
[class^="icon-"],[class*=" icon-"]
{
font-family:FontAwesome;
font-weight:normal;
font-style:normal;
text-decoration:inherit;
-webkit-font-smoothing:antialiased;
*margin-right:.3em;
}
참고URL : https://stackoverflow.com/questions/11052398/rails-using-font-awesome
'Program Tip' 카테고리의 다른 글
| 해시의 값으로 ERB 템플릿 렌더링 (0) | 2020.12.13 |
|---|---|
| 속성 별 Android 정렬 배열 목록 (0) | 2020.12.13 |
| 카피 바라 테스트를위한 드롭 다운의 선택 값 가져 오기 (0) | 2020.12.13 |
| svn 로컬 사본에서 수정 된 파일 목록 (0) | 2020.12.13 |
| Python으로 월요일 날짜 찾기 (0) | 2020.12.13 |