css - Font Awesome with Rails -


i trying font awesome working rails app following: http://fontawesome.io/get-started/

i not wish use cdn want use other fonts have no cdn want understand how non cdn fonts working: https://github.com/540co/govicons

i have downloaded , extracted font awesome into:

/app/assets/fonts/font-awesome-4.7.0

i don't know if using css or sass? in stylesheets folder have files both css , sass extensions. have application.css file , empty application.scss file. other files have scss extension.

if follow scss instructions step 2 is:

open project's font-awesome/less/variables.less or font-awesome/scss/_variables.scss , edit @fa-font-path or $fa-font-path variable point font directory.

this file located in:

/app/assets/fonts/font-awesome-4.7.0/scss/_variables.scss

this variable reads:

$fa-font-path: "../fonts" !default;

what should updated to?

i move these vendor/assets instead of app/assets because (source)

vendor/assets assets owned outside entities, such code javascript plugins , css frameworks

mkdir -p vendor/assets mv font-awesome-4.7.0/ vendor/assets/ ls vendor/assets/font-awesome-4.7.0/ # css       fonts       less        scss

and if you're using application.css, can just:

  1. edit app/assets/stylesheets/application.css
  2. add: *= require css/font-awesome in list of requires
  3. restart server , load page

and should working fine

if want use in scss:

  1. add app/assets/stylesheets/font_awesome.scss contents:

    $fa-font-path: "fonts"; @import "scss/font-awesome";

  2. add @import "font_awesome"; application.scss

the purpose of doing way don't have custom changes files in vendor/assets. downloaded site , can updated @ time without worrying whether you're going remember $fa-font-path changed custom path because done in files, not theirs.

note: you'd want use 1 of helpers (like asset-path) paths in assets, doesn't seem being used folder placeholder files given later. so, without wanting hunt through font-awesome , replace $fa-font-path asset-path, can this, current folder (in address bar, #{host}/assets/application-#{cache-buster}.css current folder /assets , /assets/fonts want (read: works me going through example).

govicons, looks you'd follow exact same steps above , should work out fine.


Comments

Post a Comment

Popular posts from this blog

python - Selenium remoteWebDriver (& SauceLabs) Firefox moseMoveTo action exception -

while performing simple hover test on firefox through selenium (3.4.0) python bindings (3.4.3) using of available os in saucelabs (except linux, latest available firefox version old), performing following actionchain: hover = actionchains(driver) hover.move_to_element(elm_men_menu).perform() it throws following error: taceback: file [...] in testhover hover.perform() file "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/common/action_chains.py", line 80, in perform action() file "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/common/action_chains.py", line 290, in <lambda> command.move_to, {'element': to_element.id})) file "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/remote/webdriver.py", line 256, in execute self.error_handler.check_response(response) file "/usr/local/lib/python2.7/...
Read more

html - How to custom Bootstrap grid height? -

why bootstrap grid has height 591.067 ? did height came ? .main-post { padding: 20px; background-color: #fff; border: 1px solid #d8d8d8; margin-bottom: 100px; } .main-post .post-categories { margin-bottom: 10px } .main-post h3 { margin: 0 0 10px; color: #777; letter-spacing: -1px; font-weight: bold } .main-post .post-author, .main-post .post-date, .main-post .post-comments { font-size: 12px } .main-post img { display: block; margin: 10px 0; } .main-post .post-summary { line-height: 1.7; color: #888 } .main-post { color: #999 } <div class="col-sm-6"> <div class="main-post"> <h3 class="post-title"> <a href="#"> post title </a> </...
Read more

Ansible warning on jinja2 braces on when -

i using code in vars my_var: "{{lookup('env','my_var') | default(true, true)}}" i using like - include: task.yml when: my_var this worked without issue in ansible 2.2 in ansible 2.3 warning this [warning]: when statements should not include jinja2 templating delimiters such {{ }} or {% %}. found: {{lookup('env','my_var') | default(true, true)}} so if use my_var: "lookup('env','my_var') | default(true, true)" , mean remove {{ }} , no warning my_var evaluated true no matter if pass false env variable. works fine in previous code gave how can fix it? the cleanest way set fact instead of using template in variable (it prevent lookup plugin being called multiple times in included tasks - not huge performance gain, cleaner): - set_fact: my_var: "{{lookup('env','my_var') | default(true, true)}}" also mind evaluate true in cases when environment my_var diff...
Read more