복붙노트

[RUBY-ON-RAILS] 레일 : 폰트가 최고 사용

RUBY-ON-RAILS

레일 : 폰트가 최고 사용

내 웹 디자이너가 업데이트 글꼴 / 멋진 글꼴에 추가 된 아이콘으로 날을 제공했다 - 그는 로컬 글꼴 폴더에이를 배치했다. 나는 또한 글꼴 awesome.css 파일을 받았다.

나는 글꼴 내 직접 자산 및 자산 / 스타일 시트에 넣어 글꼴 - awesome.css에 폴더에 복사됩니다.

CSS의는 내 코드에 올바르게 참조하지만, 글꼴 폴더에서 아이콘의 아무도로드되지 얻을.

및 / 또는이다 폴더 글꼴이 참조 된 것을 제대로로드되는 모든 것을 보장하기 위해 할 수있는 뭔가의 I 필요가 있습니까?

해결법

  1. ==============================

    1.먼저: 자산 경로에 응용 프로그램 / 자산 / 글꼴을 추가 (설정 / application.rb)

    먼저: 자산 경로에 응용 프로그램 / 자산 / 글꼴을 추가 (설정 / application.rb)

    config.assets.paths << Rails.root.join("app", "assets", "fonts")

    다음 / 자산 / 글꼴로 글꼴 파일을 이동 (먼저 폴더를 생성)

    이제 글꼴 awesome.css.scss.erb에 글꼴 awesome.css의 이름을 변경 이 같은 편집 : 변화:

    @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;
}

    마지막으로 모든 자원이 제대로로드 확인 (방화범 또는 크롬 경위와)

  2. ==============================

    2., 당신의 Gemfile 및 실행에 "글꼴 멋진 레일을"보석을 추가하는 쉬운 방법이 지금있다 설치 번들.

    , 당신의 Gemfile 및 실행에 "글꼴 멋진 레일을"보석을 추가하는 쉬운 방법이 지금있다 설치 번들.

    그런 다음 application.css에, CSS 파일을 포함한다 :

    /*
 *= require font-awesome
 */

    그것은 자동으로 자산 파이프 라인에 글꼴 멋진이 포함되어 있습니다. 끝난. 그것을 사용하여 시작합니다 :)

    자세한 내용은 글꼴 멋진 레일 설명서를 참조하십시오.

  3. ==============================

    3.나는 당신이 보석이나 경로 또는 그 과잉 솔루션의 대해 걱정할 필요가 없습니다이 하나의 다른 답변을 제공합니다. 그냥 application.html.erb에이 줄을 붙여 (또는 레이아웃이 무엇이든 파일)

    나는 당신이 보석이나 경로 또는 그 과잉 솔루션의 대해 걱정할 필요가 없습니다이 하나의 다른 답변을 제공합니다. 그냥 application.html.erb에이 줄을 붙여 (또는 레이아웃이 무엇이든 파일)

    <head>
...
<link href="//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
  4. ==============================

    4.Vicoar의 대답에 추가

    Vicoar의 대답에 추가

    레일 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;
}
  5. ==============================

    5.자, 다음과 같은 방법으로 레일과 멋진 글꼴을 통합하는 가장 쉬운 방법은 다음과 같습니다

    자, 다음과 같은 방법으로 레일과 멋진 글꼴을 통합하는 가장 쉬운 방법은 다음과 같습니다

    SASS 루비 보석

    쉽게 레일 프로젝트에 글꼴 최고 SASS를 얻을 수있는 공식 글꼴 최고 SASS 루비 보석을 사용합니다.

    응용 프로그램의 Gemfile에이 줄을 추가합니다 :

    gem 'font-awesome-sass'

    그리고 실행합니다 :

    $ bundle

    당신의 Application.scss이 추가 :

    @import "font-awesome-sprockets";
@import "font-awesome";
  6. ==============================

    6.당신이 사용하지 않으려면 레일 5.2이를 통과하는 데, 내가 어떻게이 작품을 공유 할 보석 글꼴 최고는-레일 :

    당신이 사용하지 않으려면 레일 5.2이를 통과하는 데, 내가 어떻게이 작품을 공유 할 보석 글꼴 최고는-레일 :

  7. ==============================

    7.글꼴 멋진 베어 본과 (4) (6) 레일 및 사용 방법 Webpacker, 추가 보석없이 복사 - 붙여 넣기하여 응용 프로그램에 글꼴이나 CSS 파일을 다른 이상한 일을 :

    글꼴 멋진 베어 본과 (4) (6) 레일 및 사용 방법 Webpacker, 추가 보석없이 복사 - 붙여 넣기하여 응용 프로그램에 글꼴이나 CSS 파일을 다른 이상한 일을 :

    글꼴 멋진 NPM 패키지를 추가 - package.json :

    {
  "dependencies": {
    "font-awesome": "4.7.0"
  }
}

    CSS는 매니페스트에 글꼴 멋진 CSS 파일을 포함 - 응용 프로그램 / 스타일 / application.css :

    /*
 *= require font-awesome/css/font-awesome.min
 *= require_tree .
 *= require_self
 */

    우리의 사용자 정의 CSS 파일에 글꼴 얼굴 정의를 무시 - 응용 프로그램 / 스타일 / 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;
}

    자산 pipeline-에 node_modules 글꼴 멋진 DIR + 글꼴 파일 형식을 포함 설정 / 초기화 / 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/

    당신은 포함 및 공공 / fonts 디렉토리에 컴파일 된 글꼴을 얻을 것이다 당신은 그것으로 컴파일 된 모든 물건 (당신의 응용 프로그램과 글꼴 최고) 단일 CSS 파일을 얻을 수 있습니다.

    문제는 글꼴 멋진 축소 된 CSS 글꼴로 경로를 하드 코드가 포함되어 생성 된 글꼴 경로이 우리 단지 추가 글꼴 얼굴 지침을 무시하는 것입니다. 이 때문에, 폰트 awesome.min.css 매니페스트 파일에 먼저 첨가한다.

    그러나 모든 것을 의지 잘 작동하는 동안, 당신은 콘솔에서 404 오류를 얻을 수 있습니다. 나는이 문제를 해결하기 위해 관리하고 결국 포기하고 글꼴 멋진-말대꾸 보석으로 전환되지 않았습니다.

  8. ==============================

    8.나는 vicoar 년대를 시도하지만, 루비 1.9.3에 따라 내 프로젝트에서 작동하지 않습니다 3.2 레일. 그럼 난 글꼴 awesome.css.erb에 파일 이름 글꼴 awesome.css 이름을 변경하고이에 @ 글꼴 얼굴을 변경 :

    나는 vicoar 년대를 시도하지만, 루비 1.9.3에 따라 내 프로젝트에서 작동하지 않습니다 3.2 레일. 그럼 난 글꼴 awesome.css.erb에 파일 이름 글꼴 awesome.css 이름을 변경하고이에 @ 글꼴 얼굴을 변경 :

    @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;
}

    그것은 아주 잘 작동 및 코드 (... 매우 간단하여 가이드 asset_pipeline를 참조 할 수 있습니다

  9. ==============================

    9.들어 3.2 레일 * 빠른 솔루션을. :

    들어 3.2 레일 * 빠른 솔루션을. :

    1) 공용 폴더에서 "글꼴"폴더에 글꼴 멋진 파일을 넣어 2) 열기 글꼴 awesome.css 및 파일의 상단에있는 "/ 글꼴"을 "../fonts"의 4 개 항목을 변경

    @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;
}

    10. from https://stackoverflow.com/questions/11052398/rails-using-font-awesome by cc-by-sa and MIT license

'RUBY-ON-RAILS' 카테고리의 다른 글

[RUBY-ON-RAILS] LINK_TO에 쿼리 문자열 매개 변수를 추가  (0) 2020.02.09
[RUBY-ON-RAILS] 세션 현재의 관행을 레일  (0) 2020.02.09
[RUBY-ON-RAILS] 여러 열 유효성 검사 고유성  (0) 2020.02.09
[RUBY-ON-RAILS] 액션 당 레이아웃 레일?  (0) 2020.02.09
[RUBY-ON-RAILS] 레일에서, 당신은 어떻게 뷰를 사용하여 JSON 렌더링합니까?  (0) 2020.02.09
,

티스토리툴바