❤
npm
Sign UpSign In

ks-fonticons

1.2.9 • Public • Published

TheStreet Keystone FontIcons

Font icon repo for TheStreet As long as your file structure is the same as TST-NG these instructions should work otherwise editing the urls from the _font-icons.scss may be necessary

Adding font-icons font to your project:

To manually add the font-icon library to a project:

  1. Download the entire font-icons dir containing the font files to the CMS-TAGS/grails-app/assets/stylesheets/fonts
  2. Download the _font-icons.scss to CMS-TAGS/grails-app/assets/stylesheets/styles/modules
  3. Commit and merge these changes in CMS-Tags project to your local branch (branch from develop), making sure you have incremented the Build.Config version number for CMS-TAGS then open a Pull Request for merge to develop branch

To install use npm:

  1. go to the vendor folder cms-tags/grails-app/assets/vendor
  2. run npm install ks-fonticons
  3. The postinstall script will auto-overwrite the fonts and _font-icons.scss
  4. Commit and merge these changes in CMS-Tags project to your local branch (branch from develop), making sure you have incremented the Build.Config version number for CMS-TAGS then open a Pull Request for merge to develop branch

To add/edit/delete the fonts:

There two main steps to udating the font library

  1. Update the library master files which will handle the adding or deleteing of font icons
  2. Update the gh-pages branch which will update the font-icon reference page of the font style-guide

Updating font library master branch files

  1. Download the selection.json file from this github repo
  2. Upload the selection.json file to icomoon.io app
  3. Add, edit or delete fonts (keep in mind the fonts are named the same as that of the svg file name used so please follow these conventions:
    1. Use dashes instead of underscores when naming svg files
    2. All fonts are prefixed with "font-icons-" so please refrain from using these words in the name ie: "share-icon" becomes "font-icon-share-icon" there fore better naming conventions would be: "share.svg" or share-arrow.svg"
  4. Then click "Generate Font"

After downloading the newly created font there are four files or sets of files to be concerned with:

  1. style.css (will become _font-icons.scss and font-icons.css)
  2. demo.html (will become index.html for the gh-pages)
  3. selection.json (will replace initial selection.json)
  4. package.json (from this repo to increment the version number)
  5. four font files inside the fonts directory
With this in mind proceed to...
  1. From the resulting files locate the style.css file and the fonts dir
  2. Edit the resulting style.css to match the _font-icons.scss file and rename it as _font-icons.scss

  3. To edit the style.css simply make sure the font face declaration at the top of the page matches: 

    @font-face {
  font-family: 'font-icons';
  src:  url('../fonts/font-icons/font-icons.eot?trcws1');
  src:  url('../fonts/font-icons/font-icons.eot?trcws1#iefix') format('embedded-opentype'),
    url('../fonts/font-icons/font-icons.ttf?trcws1') format('truetype'),
    url('../fonts/font-icons/font-icons.woff?trcws1') format('woff'),
    url('../fonts/font-icons/font-icons.svg?trcws1#font-icons') format('svg');
  font-weight: normal;
  font-style: normal;
  }
  4. After cloning a local repo for ks-font-icons
  5. Upload the new _font-icons.sccs to the assets dir of the master branch of this repo (ks-fonticons)
  6. Upload the new font files in the new fonts folder to the dir fonts/fonticons/ of the master branch of this repo (ks-fonticons)
  7. Be sure to increment the version number of the repo in the package json (you can simply do this by editing the package.json from the repo editor
  8. In the terminal on your machine navigate to the ks-fonticons local repo
  9. From this dir run 
    $ npm publish
    to update the registry to the new package version number
  10. At this point update the project by refering to the instructions above "Adding font-icons font to your project"

Updating gh-pages branch files

  1. First locate the demo.html and update the head info
    <head>
    <meta charset="utf-8">
    <title>Font Icons</title>
    <meta name="description" content="An Icon set for the street">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="assets/demo.css">
    <link rel="stylesheet" href="assets/font-icons.css"></head>
  2. Then remove the test code at the bottom
    what appears between: 
    <!--[if gt IE 8]><!-->
    AND 
    <!--<![endif]-->

    as well as the demo-script.js and icomoon link

  3. Rename the demo.html file to index.html
  4. Now locate the _font-icons.scss file you uploaded to this the master branch of the repo and duplicate it and rename the dupe: font-icons.css
  5. Then upload both files as well as all the new fonts to gh-pages branch of ks-fonticons repo, note though that the font-icons.css goes into the assets folder and the fonts go into the fonts/font-icons/ folder
  6. After committing to gh-pages branch the styleguide will be updated.
  7. You can see the showcase page for the new fonts you just edited here: https://dondmcg.github.io/
  8. Just click the dropdown and select "Font-icons"

Readme

Keywords

Package Sidebar

Install

npm i ks-fonticons

Repository

github.com/dondmcg/ks-fonticons

Homepage

github.com/dondmcg/ks-fonticons#readme

Weekly Downloads

10

Version

1.2.9

License

MIT

Last publish

Collaborators

  • dondmcg
Try on RunKit
Report malware