Getting started and documentation for the icon bundle

The structure of the icon pack [Iconsbag]

  • icon-in-the-bag -- Root folder
    • font-and-toolkit -- Font files + CSS toolkit files
      • demo-files -- Files needed to run the demo (see demo.html below)
        • demo.css
        • demo.js
      • fonts -- Icon font files
        • iconsbag.eot
        • iconsbag.ttf
        • iconsbag.woff
        • iconsbag.svg
      • iconsbag-less -- CSS toolkit adapted to LESS
        • _font.less
        • _helpers.less
        • _variables.less
        • style.less
      • iconsbag-sass -- CSS toolkit adapted to SASS
        • _font.scss
        • _helpers.scss
        • _variables.scss
        • style.scss
      • iconsbag-stylus -- CSS toolkit adapted to STYLUS
        • _font.styl
        • _helpers.styl
        • _variables.styl
        • style.styl
      • demo.html -- Demo/display of pack icons (generated by Icomoon)
      • EN_open_demo.html_with_Firefox.txt -- Instructions to open demo.html with Firefox (in English)
      • FR_ouvrir_demo.html_avec_Firefox.txt -- Instructions to open demo.html with Firefox (in French)
      • iconsbag.css -- CSS file
    • icons -- All icons (.svg + .png)
      • icon-x -- Example of an icon folder (contains the .svg file(s) + all .png files)
        • icon-x.svg
        • icon-x-32px.png
        • icon-x-64px.png
        • icon-x-128px.png
        • icon-x-256px.png
        • (...)
      • (...)
    • icons-for-font -- All icons (.svg) prepared for use in a font
      • filled -- All prepared "filled" icons
      • outline -- All prepared "outline" icons
    • EN_Extended_License.txt -- License Agreement (Extended License) in English
    • EN_Standard_License.txt -- License Agreement (Standard License) in English
    • FR_Licence_Etendue.txt -- License Agreement (Extended License) in French
    • FR_Licence_Standard.txt -- License Agreement (Standard License) in French
    • iconsbag_updates.txt -- List of pack updates

How to integrate the font [with CSS]

  1. Copy the iconsbag/font-and-toolkit/fonts directory into the root of your project.
  2. Copy the iconsbag/font-and-toolkit/iconsbag.css file into the root of your project.
  3. In the <head></head> tag of your HTML file, import the file iconsbag.css like this :
  4. 
      <head>
        // If the structure of your project is different, change the path "iconsbag.css" below.
        <link rel="stylesheet" href="iconsbag.css">
      </head>
      
  5. If the structure of your project is different, change the path fonts/iconsbag. in the file iconsbag.css
  6. 
      @font-face {
        font-family: 'iconsbag';
        src: url('fonts/iconsbag.eot');
        src: url('fonts/iconsbag.eot#iefix') format('embedded-opentype'),
          url('fonts/iconsbag.ttf') format('truetype'),
          url('fonts/iconsbag.woff') format('woff'),
          url('fonts/iconsbag.svg#iconsbag') format('svg');
        font-weight: normal;
        font-style: normal;
      }
      
  7. Go to the icons page and get some nice icons to use

How to integrate the font [with SASS/LESS/STYLUS]

The following example shows the steps with SASS (for LESS and STYLUS, replace the folder name iconsbag-sass with iconsbag-less or iconsbag-stylus and the file name style.scss with style.less or style.styl).

  1. Copy the iconsbag/font-and-toolkit/fonts directory in your project.
  2. Copy the iconsbag/font-and-toolkit/iconsbag-sass directory in your project.
  3. Whether you use SASS, LESS or STYLUS, you probably have a global file (i.e.: styles.scss or global.scss) that imports the other files. You must add the import of the iconsbag-sass/style.scss file, like this:
  4. 
      /* Your global scss file */
    
      /* ... */
      @import "iconsbag-sass/style.scss";
      
  5. In the iconsbag-sass directory, open the iconsbag-sass/_fonts.scss file and modify the variable $font-path to match the structure of your project.
    Warning: the path into the variable $font-path is relative to the compiled CSS folder
  6. 
      /* File '_fonts.scss' */
    
      $font-family: "iconsbag" !default;
      $font-path: "fonts" !default;
      /* ... */
      
  7. Go to the icons page and get some nice icons to use

Simple use

You should use the CSS class ib (shortcut for Icons in the Bag) then a second class composed of ib- + the name of the icon to be displayed (e.g.: ib-check-circle)

check-circle

   check-circle
  

In the previous example, we use the HTML tag <i></i> but you can use an another tag, such as <span></span>

check-circle

   check-circle
  

You also have the possibility to use an optional class (see the chapter "The available options" below)

check-circle

   check-circle
  
  

Of course, you can completely modify the icons with CSS

check-circle

   check-circle

  

   check-circle
  <style>
  i {
    color: green;
    font-size: 2rem;
    margin: 1rem;
  }
  </style>
  

To customize the vertical alignment of icons according to your needs, you can use the CSS property vertical-align

minus

minus

minus

minus

minus

minus


  // With the predefined values of "vertical-align"
  

minus

minus

minus

minus

// With a custom value

minus

minus

If the icon has only a "decorative" purpose, it is better to add the attribute aria-hidden="true" to inform compatible browsers that the element should not be vocalized (read by a screen reader for the blind) for example.

check-circle

   check-circle
  

If the icon has only a "decorative" purpose but you want to add a message that will be read only by assistive technologies, you can do this:

check The purchase is confirmed

   check
  The purchase is confirmed
  

The available options

Change the icons size

check-circle

check-circle x1

check-circle x2

check-circle x3

check-circle x4

check-circle x5


   check-circle
   check-circle x1
   check-circle x2
   check-circle x3
   check-circle x4
   check-circle x5
  
  

Use icons in a list

  • Element 1
  • Element 2
  • Element 3
  • Element 4
  • Element 5
  • Element 6
  • Element 7
  • Element 8

  
  • Element 1
  • Element 2
  • Element 3
  • Element 4
  • Element 5
  • Element 6
  • Element 7
  • Element 8

Transform icons

Standard

ib-h-flip

ib-v-flip

ib-rot45

ib-rot90

ib-rot135

ib-rot180

ib-rot225

ib-rot270

ib-rot315


  

Standard

ib-h-flip

ib-v-flip

ib-rot45

ib-rot90

ib-rot135

ib-rot180

ib-rot225

ib-rot270

ib-rot315