Skip to content

Latest commit

 

History

History
 
 

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Updating FontAwesome Files

If you are looking to update the FontAwesome files in font.scss, you'll need to do the following:

  1. Download css and webfont files from FontAwesome. Sign in with our shared dev account, find our "Code.org Kit", then click "Download Web Files" from the "Self-Host on the Web" option. This should produce a download of a superset of files you'll need to upload to S3 (we only use the css and webfont directories).
  2. Use "Host Yourself - Webfonts" instructions here. Supplement with the "Version 4 Compatibility" instructions listed there as well. link
  3. Once you've downloaded the kit, update the relative paths for font files listed in CSS to be absolute paths to URLs storing the font files, rather than relative paths. For example, you'd replace:
    • ../webfonts with
    • https://dsco.code.org/assets/font-awesome-pro/1762452190/webfonts
  4. Upload the css and webfont files to the cdo-dsco bucket S3 bucket. Timestamp the folder location in S3 with the current unix timestamp. For example, you'd end up with a S3 locations like:
    • cdo-dsco/assets/font-awesome-pro/1762452190/css/all.css
    • cdo-dsco/assets/font-awesome-pro/1762452190/webfonts/custom-icons.woff2
  5. [Only necessary if starting from scratch, should apply by default to new uploads] Update CORS configuration on cdo-dsco bucket to allow fetching of these files across code.org, studio.code.org, and hourofcode.com. More documentation on those changes are in this Slack thread.
  6. If you're modifying custom fontawesome icons (i.e. 'kit' icons), make sure the list in frontend/packages/component-library/src/fontAwesomeV6Icon/constants/index.ts is up to date as well as the FontAwesome storybook frontend/packages/component-library/src/fontAwesomeV6Icon/stories/FontAwesomeV6Icon.story.tsx If any are being removed, you might want to search the codebase for any usages of those icons to avoid regressions.

At time of writing, these files were referenced in the following places:

Hard coded strings

  • Applab Exporter: apps/src/applab/Exporter.js
  • hourofcode.com: pegasus/sites.v3/hourofcode.com/styles/030-font-awesome-min.css
  • shared: shared/css/font.scss (shared strings defined here)

Usages of shared strings

  • pegasus: pegasus/sites.v3/code.org/public/css/font-awesome.min.scss
  • dashboard: dashboard/app/stylesheets/application.scss