Merge pull request #2453 from mike-esokia/PHRAS-1746_migration_bower_to_yarn

PHRAS-1746 migration bower to yarn

.bowerrc

@@ -1,3 +0,0 @@
-{
-  "directory": "www/bower_components"
-}

Makefile

@@ -8,7 +8,7 @@ install_composer:
 	composer install
 
 install_asset_dependencies:
-	npm install
+	yarn
 	./node_modules/.bin/gulp build
 
 install_assets:
@@ -17,7 +17,6 @@ install_assets:
 clean_assets:
 	rm -rf ./node_modules
 	rm -rf ./www/assets
-	rm -rf ./www/bower_components
 	mkdir ./node_modules
 	touch ./node_modules/.gitkeep
 

bower.json

@@ -1,46 +0,0 @@
-{
-  "name": "Phraseanet",
-  "version": "4.0.0",
-  "dependencies": {
-    "jquery": "~1.11.3",
-    "jquery-ui": "~1.10.4",
-    "jquery-mobile-bower": "~1.3.0",
-    "underscore": "~1.4.4",
-    "font-awesome": "~3.2.1",
-    "modernizr": "~2.8.3",
-    "normalize-css": "~2.1.3",
-    "json2": "latest",
-    "humane-js": "~3.0.6",
-    "jquery-file-upload": "~8.3.2",
-    "blueimp-load-image": "latest",
-    "requirejs": "~2.1",
-    "backbone-amd": "~1.0",
-    "underscore-amd": "~1.4",
-    "i18next": "~1.6",
-    "bootstrap-multiselect": "v0.9",
-    "zxcvbn": "https://github.com/lowe/zxcvbn.git",
-    "geonames-server-jquery-plugin": "~0.2",
-    "tinymce": "~4.0",
-    "jquery-galleria": "1.2.9",
-    "jquery.cookie": "~1.4",
-    "fancytree": "~2.7",
-    "bootstrap-sass": "v2.3.2.2",
-    "jquery.lazyload": "~1.9.7",
-    "jquery-treeview": "~1.4.2",
-    "alchemy-embed-medias": "~0.3.4",
-    "html5shiv": "^3.7.3",
-    "jquery-simplecolorpicker": "^0.3.1"
-  },
-  "devDependencies": {
-    "mocha": "latest",
-    "sinonjs": "~1.7.0",
-    "chai": "~1.6",
-    "squire": "~0",
-    "sinon-chai": "~2.5",
-    "qunit": "https://github.com/jquery/qunit.git#1.11.0",
-    "js-fixtures": "https://github.com/badunk/js-fixtures/archive/master.zip"
-  },
-  "resolutions": {
-    "jquery": "~1.11.3"
-  }
-}

package.json

@@ -1,17 +1,16 @@
 {
   "name": "phraseanet",
-  "version": "4.0.0",
+  "version": "4.1.1",
   "devDependencies": {
-    "bower": "^1.6.5",
-    "bower-files": "^3.11.3",
     "browser-sync": "^2.10.0",
+    "chai": "^1.6.1",
     "del": "^2.1.0",
     "fs": "0.0.2",
     "gulp": "^3.9.0",
     "gulp-autoprefixer": "^3.1.0",
     "gulp-concat": "^2.6.0",
     "gulp-concat-util": "^0.5.4",
-    "gulp-cssmin": "^0.1.7",
+    "gulp-cssmin": "^0.2.0",
     "gulp-debug": "^2.1.2",
     "gulp-install": "^0.6.0",
     "gulp-qunit": "^1.2.1",
@@ -21,7 +20,14 @@
     "gulp-util": "^3.0.7",
     "gulp-watch": "^4.3.5",
     "jake": "latest",
+    "js-fixtures": "^1.5.3",
+    "mocha": "^4.1.0",
     "path": "^0.12.7",
+    "qunit": "^1.0.0",
+    "qunitjs": "^1.11.0",
+    "sinon": "^1.17.7",
+    "sinon-chai": "^2.5.0",
+    "squirejs": "^0.2.1",
     "tmp": "0.0.23",
     "wrench": "^1.5.8"
   },
@@ -35,7 +41,35 @@
     "phraseanet-production-client": "npm uninstall phraseanet-production-client && npm install phraseanet-production-client && ./node_modules/.bin/gulp build-phraseanet-production-client"
   },
   "dependencies": {
-    "alchemy-embed-medias": "^0.4.4",
+    "JSON2": "^0.1.0",
-    "phraseanet-production-client": "^0.32.3"
+    "alchemy-embed-medias": "^0.5.1",
+    "backbone": "^1.3.3",
+    "blueimp-file-upload": "^8.3.0",
+    "blueimp-load-image": "^2.17.1",
+    "bootstrap-multiselect": "^0.9.13-1",
+    "bootstrap-sass": "^2.3.2",
+    "font-awesome": "^4.7.0",
+    "galleria": "^1.5.7",
+    "geonames-server-jquery-plugin": "^0.2.2",
+    "html5shiv": "^3.7.3",
+    "humane-js": "^3.0.6",
+    "i18next": "^8.4.3",
+    "jquery": "~1.11.3",
+    "jquery-lazyload": "^1.9.7",
+    "jquery-mobile": "^1.5.0-alpha.1",
+    "jquery-simplecolorpicker": "^0.3.1",
+    "jquery-ui": "^1.12.1",
+    "jquery-ui-datepicker-with-i18n": "^1.10.4",
+    "jquery-ui-dist": "^1.12.1",
+    "jquery.cookie": "^1.4.1",
+    "jquery.fancytree": "^2.27.0",
+    "normalize-css": "^2.1.0",
+    "npm": "^5.6.0",
+    "npm-modernizr": "^2.8.3",
+    "phraseanet-production-client": "^0.33.0",
+    "requirejs": "^2.1.22",
+    "tinymce": "^4.0.28",
+    "underscore": "^1.8.3",
+    "zxcvbn": "^4.4.2"
   }
 }

resources/gulp/components/admin.js

@@ -15,14 +15,14 @@ gulp.task('build-admin-css', function(){
 
 gulp.task('build-admin-js', function(){
     var adminGroup = [
-        config.paths.vendors + 'underscore-amd/underscore.js',
+        config.paths.nodes + 'underscore/underscore.js',
-        config.paths.vendors + 'jquery-treeview/jquery.treeview.js',
+        config.paths.nodes + 'jquery-treeview/jquery.treeview.js',
         // config.paths.vendors + 'jquery-file-upload/js/vendor/jquery.ui.widget.js',
         // config.paths.vendors + 'jquery-file-upload/js/jquery.iframe-transport.js',
         // config.paths.vendors + 'jquery-file-upload/js/jquery.fileupload.js',
         config.paths.src +  'admin/js/jquery.kb-event.js',
         config.paths.src +  'admin/js/template-dialogs.js',
-        config.paths.vendors + 'requirejs/require.js',
+        config.paths.nodes + 'requirejs/require.js',
         config.paths.dist +  'scripts/apps/admin/require.config.js',
         config.paths.dist +  'scripts/apps/admin/main/main.js'
     ];

resources/gulp/components/authentication.js

@@ -15,7 +15,7 @@ gulp.task('build-authentication-css', function(){
 
 gulp.task('build-authentication-js', function(){
     var authenticationGroup = [
-        config.paths.vendors + 'requirejs/require.js',
+        config.paths.nodes + 'requirejs/require.js',
         config.paths.dist + 'scripts/apps/login/home/config.js'
     ];
     return utils.buildJsGroup(authenticationGroup, 'authentication', 'authentication/js', debugMode);

resources/gulp/components/common.js

@@ -9,12 +9,12 @@ gulp.task('copy-common-images', function(){
 });
 
 gulp.task('copy-common-fonts',function(){
-    return gulp.src([config.paths.vendors + 'font-awesome/font/*'])
+    return gulp.src([config.paths.nodes + 'font-awesome/fonts/*'])
-        .pipe(gulp.dest( config.paths.build + 'common/font'));
+        .pipe(gulp.dest(config.paths.build + 'common/fonts'));
 });
 
 gulp.task('build-common-font-css', ['copy-common-fonts'],function(){
-    return gulp.src([config.paths.vendors + 'font-awesome/css/font-awesome-ie7.min.css'])
+    return gulp.src([config.paths.nodes + 'font-awesome/css/font-awesome.min.css'])
         .pipe(gulp.dest( config.paths.build + 'common/css'));
 });
 
@@ -31,13 +31,13 @@ gulp.task('build-common-js', function(){
         // config.paths.dist + 'assets/bootstrap/js/bootstrap.js', // should append no conflict
         config.paths.src + 'vendors/jquery-mousewheel/js/jquery.mousewheel.js',
         // jquery ui date picker langs
-        config.paths.vendors + 'jquery-ui/ui/i18n/jquery.ui.datepicker-ar.js',
+        config.paths.nodes + 'jquery-ui-datepicker-with-i18n/ui/i18n/jquery.ui.datepicker-ar.js',
-        config.paths.vendors + 'jquery-ui/ui/i18n/jquery.ui.datepicker-de.js',
+        config.paths.nodes + 'jquery-ui-datepicker-with-i18n/ui/i18n/jquery.ui.datepicker-de.js',
-        config.paths.vendors + 'jquery-ui/ui/i18n/jquery.ui.datepicker-es.js',
+        config.paths.nodes + 'jquery-ui-datepicker-with-i18n/ui/i18n/jquery.ui.datepicker-es.js',
-        config.paths.vendors + 'jquery-ui/ui/i18n/jquery.ui.datepicker-fr.js',
+        config.paths.nodes + 'jquery-ui-datepicker-with-i18n/ui/i18n/jquery.ui.datepicker-fr.js',
-        config.paths.vendors + 'jquery-ui/ui/i18n/jquery.ui.datepicker-nl.js',
+        config.paths.nodes + 'jquery-ui-datepicker-with-i18n/ui/i18n/jquery.ui.datepicker-nl.js',
-        config.paths.vendors + 'jquery-ui/ui/i18n/jquery.ui.datepicker-en-GB.js',
+        config.paths.nodes + 'jquery-ui-datepicker-with-i18n/ui/i18n/jquery.ui.datepicker-en-GB.js',
-        config.paths.vendors + 'jquery.cookie/jquery.cookie.js',
+        config.paths.nodes + 'jquery.cookie/jquery.cookie.js',
         config.paths.src + 'vendors/jquery-contextmenu/js/jquery.contextmenu_custom.js',
         config.paths.src + 'common/js/components/common.js',
         config.paths.src + 'common/js/components/tooltip.js',

resources/gulp/components/setup.js

@@ -15,7 +15,7 @@ gulp.task('build-setup-css', function(){
 
 gulp.task('build-setup-js', function(){
     var setupGroup = [
-        config.paths.vendors + 'jquery.cookie/jquery.cookie.js',
+        config.paths.nodes + 'jquery.cookie/jquery.cookie.js',
         config.paths.src + 'vendors/jquery-validation/js/jquery.validate.js',
         config.paths.src + 'vendors/jquery-validate.password/js/jquery.validate.password.js',
         config.paths.src + 'vendors/jquery-test-paths/jquery.test-paths.js'

resources/gulp/components/vendors/alchemy-embed.js

@@ -15,7 +15,7 @@ gulp.task('copy-alchemy-embed', function(){
         return gulp.src('vendor/alchemy/embed-bundle/dist/**/*')
             .pipe(gulp.dest( config.paths.build + 'vendors/alchemy-embed-medias'));
     }
-    return gulp.src(config.paths.vendors + 'alchemy-embed-medias/dist/**/*')
+    return gulp.src(config.paths.nodes + 'alchemy-embed-medias/dist/**/*')
         .pipe(gulp.dest( config.paths.build + 'vendors/alchemy-embed-medias'));
 });
 gulp.task('watch-alchemy-embed-js', function() {

resources/gulp/components/vendors/backbone.js

@@ -7,11 +7,11 @@ var utils = require('../../utils.js');
 
 gulp.task('build-underscore', function(){
     return utils.buildJsGroup([
-        config.paths.vendors + 'underscore-amd/underscore.js'
+        config.paths.nodes + 'underscore/underscore.js'
     ], 'underscore', 'vendors/underscore');
 });
 gulp.task('build-backbone', ['build-underscore'], function(){
     return utils.buildJsGroup([
-        config.paths.vendors + 'backbone-amd/backbone.js'
+        config.paths.nodes + 'backbone/backbone.js'
     ], 'backbone', 'vendors/backbone');
 });

resources/gulp/components/vendors/blueimp-load-image.js

@@ -4,6 +4,6 @@ var utils = require('../../utils.js');
 
 gulp.task('build-blueimp-load-image', function(){
     return utils.buildJsGroup([
-        config.paths.vendors + 'blueimp-load-image/js/load-image.js'
+        config.paths.nodes + 'blueimp-load-image/js/load-image.js'
     ], 'load-image', 'vendors/blueimp-load-image');
 });

resources/gulp/components/vendors/bootstrap-multiselect.js

@@ -4,6 +4,6 @@ var utils = require('../../utils.js');
 
 gulp.task('build-bootstrap-multiselect', function(){
     return utils.buildJsGroup([
-        config.paths.vendors + 'bootstrap-multiselect/dist/js/bootstrap-multiselect.js'
+        config.paths.nodes + 'bootstrap-multiselect/dist/js/bootstrap-multiselect.js'
     ], 'bootstrap-multiselect', 'vendors/bootstrap-multiselect');
 });

resources/gulp/components/vendors/bootstrap.js

@@ -9,19 +9,19 @@ var utils = require('../../utils.js');
 
 gulp.task('bootstrap-js', function () {
     var btSource = [
-        config.paths.vendors + 'bootstrap-sass/vendor/assets/javascripts/bootstrap-transition.js',
+        config.paths.nodes + 'bootstrap-sass/js/bootstrap-transition.js',
-        config.paths.vendors + 'bootstrap-sass/vendor/assets/javascripts/bootstrap-alert.js',
+        config.paths.nodes + 'bootstrap-sass/js/bootstrap-alert.js',
-        config.paths.vendors + 'bootstrap-sass/vendor/assets/javascripts/bootstrap-modal.js',
+        config.paths.nodes + 'bootstrap-sass/js/bootstrap-modal.js',
-        config.paths.vendors + 'bootstrap-sass/vendor/assets/javascripts/bootstrap-dropdown.js',
+        config.paths.nodes + 'bootstrap-sass/js/bootstrap-dropdown.js',
-        config.paths.vendors + 'bootstrap-sass/vendor/assets/javascripts/bootstrap-scrollspy.js',
+        config.paths.nodes + 'bootstrap-sass/js/bootstrap-scrollspy.js',
-        config.paths.vendors + 'bootstrap-sass/vendor/assets/javascripts/bootstrap-tab.js',
+        config.paths.nodes + 'bootstrap-sass/js/bootstrap-tab.js',
-        config.paths.vendors + 'bootstrap-sass/vendor/assets/javascripts/bootstrap-tooltip.js',
+        config.paths.nodes + 'bootstrap-sass/js/bootstrap-tooltip.js',
-        config.paths.vendors + 'bootstrap-sass/vendor/assets/javascripts/bootstrap-popover.js',
+        config.paths.nodes + 'bootstrap-sass/js/bootstrap-popover.js',
-        config.paths.vendors + 'bootstrap-sass/vendor/assets/javascripts/bootstrap-button.js',
+        config.paths.nodes + 'bootstrap-sass/jss/bootstrap-button.js',
-        config.paths.vendors + 'bootstrap-sass/vendor/assets/javascripts/bootstrap-collapse.js',
+        config.paths.nodes + 'bootstrap-sass/js/bootstrap-collapse.js',
-        config.paths.vendors + 'bootstrap-sass/vendor/assets/javascripts/bootstrap-carousel.js',
+        config.paths.nodes + 'bootstrap-sass/js/bootstrap-carousel.js',
-        config.paths.vendors + 'bootstrap-sass/vendor/assets/javascripts/bootstrap-typeahead.js',
+        config.paths.nodes + 'bootstrap-sass/js/bootstrap-typeahead.js',
-        config.paths.vendors + 'bootstrap-sass/vendor/assets/javascripts/bootstrap-affix.js'];
+        config.paths.nodes + 'bootstrap-sass/js/bootstrap-affix.js'];
 
     gulp.src(btSource)
         .pipe(concat('bootstrap.js'))
@@ -31,21 +31,21 @@ gulp.task('bootstrap-js', function () {
         .pipe(gulp.dest( config.paths.build + 'vendors/bootstrap/js'))
 });
 gulp.task('bootstrap-assets', function () {
-    gulp.src([config.paths.vendors + 'bootstrap-sass/vendor/assets/images/**/*'])
+    gulp.src([config.paths.nodes + 'bootstrap-sass/img/**/*'])
         .pipe(gulp.dest( config.paths.build + 'vendors/bootstrap/img'));
 
 });
 gulp.task('build-bootstrap', ['bootstrap-assets', 'bootstrap-js'], function () {
     // build standalone version (not used, see: Common Component)
-    gulp.src(config.paths.vendors + 'bootstrap-sass/vendor/assets/stylesheets/bootstrap.scss')
+    gulp.src(config.paths.nodes + 'bootstrap-sass/bootstrap-2.3.2.css')
         .pipe(sass().on('error', sass.logError))
         .pipe(gulp.dest( config.paths.build + 'vendors/bootstrap/css/'))
         .pipe(cssmin())
         .pipe(rename({ suffix: '.min' }))
         .pipe(gulp.dest( config.paths.build + 'vendors/bootstrap/css'));
     gulp.src([
-        config.paths.vendors + 'bootstrap-sass/vendor/assets/stylesheets/bootstrap-responsive.scss',
+        config.paths.nodes + 'bootstrap-sass/bootstrap-responsive-2.3.2.css',
-        config.paths.vendors + 'bootstrap-sass/vendor/assets/stylesheets/bootstrap/_responsive-utilities.scss'
+        config.paths.nodes + 'bootstrap-sass/lib/_responsive-utilities.scss'
     ])
         .pipe(sass().on('error', sass.logError))
         .pipe(gulp.dest( config.paths.build + 'vendors/bootstrap/css/'))

resources/gulp/components/vendors/geonames-server-jquery-plugin.js

@@ -4,6 +4,6 @@ var utils = require('../../utils.js');
 
 gulp.task('build-geonames-server-jquery-plugin', function(){
     return utils.buildJsGroup([
-        config.paths.vendors + 'geonames-server-jquery-plugin/jquery.geonames.js'
+        config.paths.nodes + 'geonames-server-jquery-plugin/jquery.geonames.js'
     ], 'jquery.geonames', 'vendors/jquery.geonames');
 });

resources/gulp/components/vendors/html5shiv.js

@@ -4,6 +4,6 @@ var utils = require('../../utils.js');
 
 gulp.task('build-html5shiv', function(){
     return utils.buildJsGroup([
-        config.paths.vendors + 'html5shiv/dist/html5shiv.js'
+        config.paths.nodes + 'html5shiv/dist/html5shiv.js'
     ], 'html5shiv', 'vendors/html5shiv');
 });

resources/gulp/components/vendors/i18next.js

@@ -4,6 +4,6 @@ var utils = require('../../utils.js');
 
 gulp.task('build-i18next', function(){
     return utils.buildJsGroup([
-        config.paths.vendors + 'i18next/release/i18next.amd-1.6.3.js'
+        config.paths.nodes + 'i18next//i18next.js'
     ], 'i18next', 'vendors/i18next');
 });

resources/gulp/components/vendors/jquery-cookie.js

@@ -4,6 +4,6 @@ var utils = require('../../utils.js');
 
 gulp.task('build-jquery-cookie', function(){
     return utils.buildJsGroup([
-        config.paths.vendors + 'jquery.cookie/jquery.cookie.js'
+        config.paths.nodes + 'jquery.cookie/jquery.cookie.js'
     ], 'jquery.cookie', 'vendors/jquery.cookie');
 });

resources/gulp/components/vendors/jquery-file-upload.js

@@ -6,18 +6,18 @@ var utils = require('../../utils.js');
 
 gulp.task('build-jquery-file-upload-widget', [], function(){
     return utils.buildJsGroup([
-        config.paths.vendors + 'jquery-file-upload/js/vendor/jquery.ui.widget.js'
+        config.paths.nodes + 'blueimp-file-upload/js/vendor/jquery.ui.widget.js'
     ], 'jquery.ui.widget', 'vendors/jquery-file-upload');
 });
 
 gulp.task('build-jquery-file-transport', [], function(){
     return utils.buildJsGroup([
-        config.paths.vendors + 'jquery-file-upload/js/jquery.iframe-transport.js'
+        config.paths.nodes + 'blueimp-file-upload/js/jquery.iframe-transport.js'
     ], 'jquery.iframe-transport', 'vendors/jquery-file-upload');
 });
 
 gulp.task('build-jquery-file-upload', ['build-jquery-file-transport', 'build-jquery-file-upload-widget'], function(){
     return utils.buildJsGroup([
-        config.paths.vendors + 'jquery-file-upload/js/jquery.fileupload.js'
+        config.paths.nodes + 'blueimp-file-upload/js/jquery.fileupload.js'
     ], 'jquery.fileupload', 'vendors/jquery-file-upload');
 });

resources/gulp/components/vendors/jquery-galleria.js

@@ -4,23 +4,23 @@ var utils = require('../../utils.js');
 
 gulp.task('build-galleria-css', function(){
     return utils.buildCssGroup([
-        config.paths.vendors + 'jquery-galleria/src/themes/classic/galleria.classic.css'
+        config.paths.nodes + 'galleria/src/themes/classic/galleria.classic.css'
     ], 'galleria.classic', 'vendors/jquery-galleria');
 });
 gulp.task('build-galleria-js-classic', function(){
     return utils.buildJsGroup([
-        config.paths.vendors + 'jquery-galleria/src/themes/classic/galleria.classic.js'
+        config.paths.nodes + 'galleria/src/themes/classic/galleria.classic.js'
     ], 'galleria.classic', 'vendors/jquery-galleria');
 });
 
 gulp.task('build-galleria-js', ['build-galleria-js-classic'], function(){
     return utils.buildJsGroup([
-        config.paths.vendors + 'jquery-galleria/src/galleria.js'
+        config.paths.nodes + 'galleria/src/galleria.js'
     ], 'galleria', 'vendors/jquery-galleria');
 });
 
 gulp.task('build-jquery-galleria', ['build-galleria-js', 'build-galleria-css'], function(){
     // copy jquery mobile assets
-    return gulp.src(config.paths.vendors + 'jquery-galleria/src/themes/classic/!(*.js|*.map|*.css|*.html)')
+    return gulp.src(config.paths.nodes + 'galleria/src/themes/classic/!(*.js|*.map|*.css|*.html)')
         .pipe(gulp.dest( config.paths.build + 'vendors/jquery-galleria'));
 });

resources/gulp/components/vendors/jquery-lazyload.js

@@ -4,6 +4,6 @@ var utils = require('../../utils.js');
 
 gulp.task('build-jquery-lazyload', function(){
     return utils.buildJsGroup([
-        config.paths.vendors + 'jquery.lazyload/jquery.lazyload.js'
+        config.paths.nodes + 'jquery-lazyload/jquery.lazyload.js'
     ], 'jquery.lazyload', 'vendors/jquery.lazyload');
 });

resources/gulp/components/vendors/jquery-mobile.js

@@ -4,18 +4,18 @@ var utils = require('../../utils.js');
 
 gulp.task('build-jquery-mobile-css', function(){
     return utils.buildCssGroup([
-        config.paths.vendors + 'jquery-mobile-bower/css/jquery.mobile-1.3.2.css'
+        config.paths.nodes + 'jquery-mobile/css/themes/default/jquery.mobile.css'
     ], 'jquery-mobile', 'vendors/jquery-mobile');
 });
 
 gulp.task('build-jquery-mobile-js', function(){
     return utils.buildJsGroup([
-        config.paths.vendors + 'jquery-mobile-bower/js/jquery.mobile-1.3.2.js'
+        config.paths.nodes + 'jquery-mobile/js/jquery.mobile.js'
     ], 'jquery-mobile', 'vendors/jquery-mobile');
 });
 
 gulp.task('build-jquery-mobile', ['build-jquery-mobile-js', 'build-jquery-mobile-css'], function(){
     // copy jquery mobile assets
-    return gulp.src(config.paths.vendors + 'jquery-mobile-bower/css/images/**/*')
+    return gulp.src(config.paths.nodes + 'jquery-mobile-bower/css/themes/default/images/**/*')
         .pipe(gulp.dest( config.paths.build + 'vendors/jquery-mobile/images'));
 });

resources/gulp/components/vendors/jquery-treeview.js

@@ -3,7 +3,7 @@ var config = require('../../config.js');
 var utils = require('../../utils.js');
 
 gulp.task('copy-jquery-treeview-images', function(){
-    return gulp.src([config.paths.vendors + 'jquery-treeview/images/**/*'])
+    return gulp.src([config.paths.nodes + 'jquery-treeview/images/**/*'])
         .pipe(gulp.dest( config.paths.build + 'vendors/jquery-treeview/images'));
 });
 gulp.task('build-jquery-treeview', ['copy-jquery-treeview-images'], function(){
@@ -12,6 +12,6 @@ gulp.task('build-jquery-treeview', ['copy-jquery-treeview-images'], function(){
         config.paths.vendors + 'jquery-treeview/jquery.treeview.async.js'
     ], 'jquery.treeview.async', 'vendors/jquery-treeview');*/
     return utils.buildJsGroup([
-        config.paths.vendors + 'jquery-treeview/jquery.treeview.js'
+        config.paths.nodes + 'jquery-treeview/jquery.treeview.js'
     ], 'jquery.treeview', 'vendors/jquery-treeview');
 });

resources/gulp/components/vendors/jquery-ui.js

@@ -19,6 +19,6 @@ gulp.task('copy-jquery-ui-theme2', function(){
 gulp.task('build-jquery-ui', ['copy-jquery-ui-images', 'copy-jquery-ui-theme1', 'copy-jquery-ui-theme2'], function(){
     // copy jquery ui assets
     return utils.buildJsGroup([
-        config.paths.vendors + 'jquery-ui/ui/jquery-ui.js'
+        config.paths.nodes + 'jquery-ui-dist/jquery-ui.js'
     ], 'jquery-ui', 'vendors/jquery-ui');
 });

resources/gulp/components/vendors/jquery.js

@@ -4,6 +4,6 @@ var utils = require('../../utils.js');
 
 gulp.task('build-jquery', function(){
     return utils.buildJsGroup([
-        config.paths.vendors + 'jquery/dist/jquery.js'
+        config.paths.nodes + 'jquery/dist/jquery.js'
     ], 'jquery', 'vendors/jquery');
 });

resources/gulp/components/vendors/json2.js

@@ -4,6 +4,6 @@ var utils = require('../../utils.js');
 
 gulp.task('build-json2', [], function(){
     return utils.buildJsGroup([
-        config.paths.vendors + 'json2/json2.js'
+        config.paths.nodes + 'JSON2/json2.js'
     ], 'json2', 'vendors/json2');
 });

resources/gulp/components/vendors/modernizr.js

@@ -4,6 +4,6 @@ var utils = require('../../utils.js');
 
 gulp.task('build-modernizr', [], function(){
     return utils.buildJsGroup([
-        config.paths.vendors + 'modernizr/modernizr.js'
+        config.paths.nodes + 'npm-modernizr/modernizr.js'
     ], 'modernizr', 'vendors/modernizr');
 });

resources/gulp/components/vendors/requirejs.js

@@ -4,6 +4,6 @@ var utils = require('../../utils.js');
 
 gulp.task('build-requirejs', function(){
     return utils.buildJsGroup([
-        config.paths.vendors + 'requirejs/require.js'
+        config.paths.nodes + 'requirejs/require.js'
     ], 'require', 'vendors/requirejs');
 });

resources/gulp/components/vendors/simple-colorpicker.js

@@ -7,6 +7,6 @@ gulp.task('build-simple-colorpicker', function () {
 });
 
 gulp.task('copy-simple-colorpicker', function () {
-    return gulp.src(config.paths.vendors + 'jquery-simplecolorpicker/*')
+    return gulp.src(config.paths.nodes + 'jquery-simplecolorpicker/*')
         .pipe(gulp.dest(config.paths.build + 'vendors/jquery-simplecolorpicker'));
 });

resources/gulp/components/vendors/tinymce.js

@@ -3,6 +3,6 @@ var config = require('../../config.js');
 var utils = require('../../utils.js');
 
 gulp.task('build-tinymce', [], function(){
-    return gulp.src([config.paths.vendors + 'tinymce/**'])
+    return gulp.src([config.paths.nodes + 'tinymce/**'])
         .pipe(gulp.dest(config.paths.build + 'vendors/tinymce'));
 });

resources/gulp/components/vendors/zxcvbn.js

@@ -4,6 +4,6 @@ var utils = require('../../utils.js');
 
 gulp.task('build-zxcvbn', [], function(){
     return utils.buildJsGroup([
-        config.paths.vendors + 'zxcvbn/dist/zxcvbn.js'
+        config.paths.nodes + 'zxcvbn/dist/zxcvbn.js'
     ], 'zxcvbn', 'vendors/zxcvbn');
 });

resources/gulp/config.js

@@ -5,7 +5,8 @@ var configPaths = {
     src: 'resources/www/',
     vendors: 'www/bower_components/',
     build: 'www/assets/',
-    dist: 'www/'
+    dist: 'www/',
+    nodes: 'node_modules/'
 };
 
 exports.paths = configPaths;

resources/gulp/install.js

@@ -17,12 +17,7 @@ gulp.task('clean:assetsPath', function(done){
     return del([config.paths.build + '/**/*'], done);
 });
 
-gulp.task('install-bower-dependencies', function(){
+gulp.task('build-dependencies', function () {
-    return gulp.src(['./bower.json'])
-        .pipe(install());
-});
-
-gulp.task('build-dependencies', ['install-bower-dependencies'], function(){
     gulp.start('build');
     gulp.start('build-css');
 });

resources/www/_shared/styles/_variables.scss

@@ -1,4 +1,5 @@
-$FontAwesomePath:   '/assets/common/font' !default; // dist path
+$FontAwesomePath: '/assets/common/fonts' !default; // dist path
+$fa-font-path: "/assets/common/fonts" !default;
 $iconsPath: '/assets/common/images/icons/' !default;
 
 $mainMenuHeight: 40px !default;

resources/www/account/styles/main.scss

@@ -4,8 +4,8 @@
 @import 'variables';
 @import '../../vendors/bootstrap/bootstrap';
 @import 'skin';
-@import '../../../../www/bower_components/font-awesome/scss/font-awesome.scss';
+@import '../../../../node_modules/font-awesome/scss/font-awesome.scss';
-@import '../../../../www/bower_components/jquery-ui/themes/base/jquery.ui.autocomplete'; // not extension for inline import
+@import '../../../../node_modules/jquery-ui/themes/base/autocomplete'; // not extension for inline import
 
 $mainMenuBackgroundColor: #3b3b3b;
 $mainMenuLinkColor: #A6A6A6;

resources/www/admin/styles/main.scss

@@ -1,7 +1,8 @@
 @import '../../_shared/styles/variables';
 
 @import '../../vendors/jquery-treeview/jquery.treeview'; // to inline import css file, don't put extension
-@import '../../../../www/bower_components/jquery-file-upload/css/jquery.fileupload-ui'; // to inline import css file, don't put extension
+@import '../../../../node_modules/blueimp-file-upload/css/jquery.fileupload-ui';
+// to inline import css file, don't put extension
 @import '../../vendors/jquery-contextmenu/styles/jquery.contextmenu';
 @import '../../_shared/styles/main';
 

resources/www/authentication/styles/main.scss

@@ -2,6 +2,5 @@
 @import 'variables';
 @import '../../vendors/bootstrap/bootstrap';
 @import '../../account/styles/skin';
-
+@import '../../../../node_modules/font-awesome/scss/font-awesome.scss';
-@import '../../../../www/bower_components/font-awesome/scss/font-awesome.scss';
+@import '../../../../node_modules/jquery-ui/themes/base/autocomplete'; // not extension for inline import
-@import '../../../../www/bower_components/jquery-ui/themes/base/jquery.ui.autocomplete'; // not extension for inline import

resources/www/common/styles/main.scss

@@ -1,11 +1,11 @@
 /**
  * Common stylesheet, builded into assets/common/styles/common.css
  */
+@import '../../../../node_modules/font-awesome/scss/font-awesome.scss';
 @import '../../_shared/styles/variables';
 @import '../../vendors/bootstrap/bootstrap';
 @import '../../vendors/bootstrap/responsive';
 @import '../../_shared/styles/override-bootstrap';
-@import '../../../../www/bower_components/font-awesome/scss/font-awesome.scss';
 @import '../../_shared/styles/main';
 
 $mainMenuBackgroundColor: #212121; //BFBFBF;

resources/www/prod/js/jquery.main-prod.js

@@ -1209,7 +1209,7 @@ $(document).ready(function () {
             $('#idFrameC .ui-tabs-nav li').removeClass('ui-state-active');
             $('.WZbasketTab').css('background-position', '15px 25px');
             $('#idFrameC').addClass('closed');
-            previousTab = $('#idFrameC .icon-menu').find('li.ui-tabs-active');
+            previousTab = $('#idFrameC .prod-icon-menu').find('li.ui-tabs-active');
         }else{
             $(this).find('i').removeClass('icon-double-angle-right').addClass('icon-double-angle-left')
             $('#idFrameC').width(360);
@@ -1219,8 +1219,8 @@ $(document).ready(function () {
             $('.ui-resizable-handle, #basket_menu_trigger').show();
             $('.WZbasketTab').css('background-position', '9px 25px');
             $('#idFrameC').removeClass('closed');
-            $('#idFrameC .icon-menu li').last().find('a').trigger('click');
+            $('#idFrameC .prod-icon-menu li').last().find('a').trigger('click');
-            $('#idFrameC .icon-menu li').first().find('a').trigger('click');
+            $('#idFrameC .prod-icon-menu li').first().find('a').trigger('click');
             $(previousTab).find('a').trigger('click');
         }
 

resources/www/prod/js/tests/jquery.Edit.js.html

@@ -4,9 +4,9 @@
     <title></title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <script src="../../../../../www/assets/vendors/jquery/jquery.js"></script>
-    <script src="../../../../../www/bower_components/qunit/qunit/qunit.js"></script>
+    <script src="../../../../../node_modules/qunitjs/qunit/qunit/qunit.js"></script>
     <script src="../jquery.Edit.js"></script>
-    <link type="text/css" rel="stylesheet" href="../../../../../www/bower_components/qunit/qunit/qunit.css"/>
+    <link type="text/css" rel="stylesheet" href="../../../../../node_modules/qunitjs/qunit/qunit.css"/>
     <script>  $(document).ready(function(){
 
       // disable log messages in tests

resources/www/prod/js/tests/jquery.Selection.js.html

@@ -4,9 +4,9 @@
     <title></title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <script src="../../../../../www/assets/vendors/jquery/jquery.js"></script>
-    <script src="../../../../../www/bower_components/qunit/qunit/qunit.js"></script>
+    <script src="../../../../../node_modules/qunitjs/qunit/qunit.js"></script>
     <script src="../jquery.Selection.js"></script>
-    <link type="text/css" rel="stylesheet" href="../../../../../www/bower_components/qunit/qunit/qunit.css"/>
+    <link type="text/css" rel="stylesheet" href="../../../../../node_modules/qunitjs/qunit/qunit.css"/>
     <script>  $(document).ready(function(){
 
 

resources/www/prod/js/tests/jquery.Upload.js.html

@@ -5,10 +5,10 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <script src="../../../../../www/assets/vendors/jquery/jquery.js"></script>
         <script src="../../../../../www/assets/vendors/jquery-ui/jquery-ui.js"></script>
-        <script src="../../../../../www/bower_components/qunit/qunit/qunit.js"></script>
+        <script src="../../../../../node_modules/qunitjs/qunit/qunit.js"></script>
         <script src="../../../../../www/assets/vendors/blueimp-load-image/load-image.js"></script>
         <script src="../components/upload/jquery.Upload.js"></script>
-        <link type="text/css" rel="stylesheet" href="../../../../../www/bower_components/qunit/qunit/qunit.css"/>
+        <link type="text/css" rel="stylesheet" href="../../../../../node_modules/qunitjs/qunit/qunit.css"/>
         <script>  $(document).ready(function(){
 
             var getUploadManager = function(){

resources/www/prod/skins/ui-components/_workzone.scss

@@ -137,10 +137,10 @@ $workzoneTabDisabledTextColor: $mediumTextActiveColor !default;
     }
 
   }
-  ul.icon-menu {
+  ul.prod-icon-menu {
     width: 100%;
   }
-  .icon-menu {
+  .prod-icon-menu {
     .WZtabs, .WZplugins {
       display: block;
       width: 70px;
@@ -159,7 +159,7 @@ $workzoneTabDisabledTextColor: $mediumTextActiveColor !default;
     }
   }
   .closed {
-    .icon-menu li {
+    .prod-icon-menu li {
       clear: left;
     }
   }

resources/www/vendors/bootstrap/bootstrap.scss

@@ -10,55 +10,57 @@
 
 // Core variables and mixins
 @import "variables"; // Modify this for custom colors, font-sizes, etc
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/mixins";
+@import "../../../../node_modules/bootstrap-sass/lib/_mixins";
 
 // CSS Reset
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/reset";
+@import "../../../../node_modules/bootstrap-sass/lib/_reset";
 
 // Grid system and page structure
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/scaffolding";
+@import "../../../../node_modules/bootstrap-sass/lib/_scaffolding";
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/grid";
+@import "../../../../node_modules/bootstrap-sass/lib/_grid";
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/layouts";
+@import "../../../../node_modules/bootstrap-sass/lib/_layouts";
 
 // Base CSS
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/type";
+@import "../../../../node_modules/bootstrap-sass/lib/_type";
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/code";
+@import "../../../../node_modules/bootstrap-sass/lib/_code";
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/forms";
+@import "../../../../node_modules/bootstrap-sass/lib/_forms";
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/tables";
+@import "../../../../node_modules/bootstrap-sass/lib/_tables";
 
 // Components: common
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/sprites";
+@import "../../../../node_modules/bootstrap-sass/lib/_sprites";
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/dropdowns";
+@import "../../../../node_modules/bootstrap-sass/lib/_dropdowns";
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/wells";
+@import "../../../../node_modules/bootstrap-sass/lib/_wells";
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/component-animations";
+@import "../../../../node_modules/bootstrap-sass/lib/_component-animations";
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/close";
+@import "../../../../node_modules/bootstrap-sass/lib/_close";
 
 // Components: Buttons & Alerts
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/buttons";
+@import "../../../../node_modules/bootstrap-sass/lib/_buttons";
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/button-groups";
+@import "../../../../node_modules/bootstrap-sass/lib/_button-groups";
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/alerts"; // Note: alerts share common CSS with buttons and thus have styles in buttons
+@import "../../../../node_modules/bootstrap-sass/lib/_alerts";
+// Note: alerts share common CSS with buttons and thus have styles in buttons
 
 // Components: Nav
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/navs";
+@import "../../../../node_modules/bootstrap-sass/lib/_navs";
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/navbar";
+@import "../../../../node_modules/bootstrap-sass/lib/_navbar";
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/breadcrumbs";
+@import "../../../../node_modules/bootstrap-sass/lib/_breadcrumbs";
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/pagination";
+@import "../../../../node_modules/bootstrap-sass/lib/_pagination";
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/pager";
+@import "../../../../node_modules/bootstrap-sass/lib/_pager";
 
 // Components: Popovers
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/modals";
+@import "../../../../node_modules/bootstrap-sass/lib/_modals";
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/tooltip";
+@import "../../../../node_modules/bootstrap-sass/lib/_tooltip";
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/popovers";
+@import "../../../../node_modules/bootstrap-sass/lib/_popovers";
 
 // Components: Misc
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/thumbnails";
+@import "../../../../node_modules/bootstrap-sass/lib/_thumbnails";
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/media";
+@import "../../../../node_modules/bootstrap-sass/lib/_media";
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/labels-badges";
+@import "../../../../node_modules/bootstrap-sass/lib/_labels-badges";
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/progress-bars";
+@import "../../../../node_modules/bootstrap-sass/lib/_progress-bars";
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/accordion";
+@import "../../../../node_modules/bootstrap-sass/lib/_accordion";
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/carousel";
+@import "../../../../node_modules/bootstrap-sass/lib/_carousel";
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/hero-unit";
+@import "../../../../node_modules/bootstrap-sass/lib/_hero-unit";
 
 // Utility classes
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/utilities"; // Has to be last to override when necessary
+@import "../../../../node_modules/bootstrap-sass/lib/_utilities";
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/responsive-utilities";
+// Has to be last to override when necessary
+@import "../../../../node_modules/bootstrap-sass/lib/_responsive-utilities";

resources/www/vendors/bootstrap/responsive.scss

@@ -19,30 +19,29 @@
 // Required since we compile the responsive stuff separately
 
 @import "variables"; // Modify this for custom colors, font-sizes, etc
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/mixins";
+@import "../../../../node_modules/bootstrap-sass/lib/_mixins";
 
 
 // RESPONSIVE CLASSES
 // ------------------
-
+@import "../../../../node_modules/bootstrap-sass/lib/_responsive-utilities";
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/responsive-utilities";
 
 
 // MEDIA QUERIES
 // ------------------
 
 // Large desktops
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/responsive-1200px-min";
+@import "../../../../node_modules/bootstrap-sass/lib/_responsive-1200px-min";
 
 // Tablets to regular desktops
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/responsive-768px-979px";
+@import "../../../../node_modules/bootstrap-sass/lib/_responsive-768px-979px";
 
 // Phones to portrait tablets and narrow desktops
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/responsive-767px-max";
+@import "../../../../node_modules/bootstrap-sass/lib/_responsive-767px-max";
 
 
 // RESPONSIVE NAVBAR
 // ------------------
 
 // From 979px and below, show a button to toggle navbar contents
-@import "../../../../www/bower_components/bootstrap-sass/vendor/assets/stylesheets/bootstrap/responsive-navbar";
+@import "../../../../node_modules/bootstrap-sass/lib/_responsive-navbar";

templates/web/account/access.html.twig

@@ -181,7 +181,7 @@
                     {% set TOU = attribute(baseInfo["config"]["cgu"], app['locale']) %}
                     <tr>
                         <td colspan="3" style="text-align: center;">
-                            <i class="icon-warning"></i>
+                            <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
                             <h4>{{ "Access to the above bases constitutes acceptance of the following Terms of Use (TOU)." | trans }}</h4>
                         </td>
                     </tr>

templates/web/account/change-password.html.twig

@@ -32,11 +32,11 @@
                     </div>
                     <div class="row-fluid">
                         <div class="span12">
-                            {{ auth_macro.fieldInput(form.oldPassword, "passwordChangeForm", 'icon-lock') }}
+                            {{ auth_macro.fieldInput(form.oldPassword, "passwordChangeForm", 'fa fa-lock') }}
                         </div>
                     </div>
 
-                    {{ auth_macro.repeatedInput(form.password, "passwordChangeForm", 'icon-lock') }}
+                    {{ auth_macro.repeatedInput(form.password, "passwordChangeForm", 'fa fa-lock') }}
 
                     {{ form_rest(form) }}
                     <div class="row-fluid">

templates/web/account/reset-email.html.twig

@@ -50,7 +50,7 @@
                 </div>
             </form>
             <div class="well well-small alert-info">
-                <i class="icon icon-info-sign"></i> &nbsp;
+                <i class="icon fa fa-info-circle" aria-hidden="true"></i> &nbsp;
                 <b>{{ "admin::compte-utilisateur: Pourquoi me demande-t-on mon mot de passe pour changer mon adresse email ?" | trans }}</b>
                 <br />
                 {{ "admin::compte-utilisateur: Votre adresse e-mail sera utilisee lors de la perte de votre mot de passe afin de pouvoir le reinitialiser, il est important que vous soyez la seule personne a pouvoir la changer." | trans }}

templates/web/admin/collection/collection.html.twig

@@ -147,7 +147,7 @@
         {% if app.getAclForUser(app.getAuthenticatedUser()).has_right_on_base(bas_id, constant('\\ACL::COLL_MANAGE')) %}
             <form method="post" action="{{ path('admin_collection_delete_logo', { 'bas_id' : bas_id }) }}" style="margin:0;">
                 <button class="btn btn-danger btn-mini" >
-                    <i class="icon-trash icon-white"></i>
+                    <i class="fa fa-trash-o icon-white" aria-hidden="true"></i>
                     {{ 'boutton::supprimer' | trans }}
                 </button>
             </form>
@@ -156,7 +156,7 @@
         <span>{{ 'admin::base:collection: aucun fichier (minilogo, watermark ...)' | trans }}</span>
         <form class="fileupload no-ajax" enctype="multipart/form-data" method="post" action="{{ path('admin_collection_submit_logo', { 'bas_id' : bas_id }) }}" style="margin:0;">
             <span class="btn btn-success fileinput-button">
-                <i class="icon-plus icon-white"></i>
+                <i class="fa fa-plus icon-white" aria-hidden="true"></i>
                 <span>{% trans %}Select files...{% endtrans %}</span>
                 <input name="newLogo" type="file" accept="image/*" />
             </span>
@@ -172,7 +172,7 @@
         {% if app.getAclForUser(app.getAuthenticatedUser()).has_right_on_base(bas_id, constant('\\ACL::COLL_MANAGE')) %}
             <form method="post" action="{{ path('admin_collection_delete_watermark', { 'bas_id' : bas_id }) }}" style="margin:0;">
                 <button class="btn btn-danger btn-mini">
-                    <i class="icon-trash icon-white"></i>
+                    <i class="fa fa-trash-o icon-white" aria-hidden="true"></i>
                     {{ 'boutton::supprimer' | trans }}
                 </button>
             </form>
@@ -181,7 +181,7 @@
         <span>{{ 'admin::base:collection: aucun fichier (minilogo, watermark ...)' | trans }}</span>
         <form class="fileupload no-ajax" enctype="multipart/form-data" method="post" action="{{ path('admin_collection_submit_watermark', { 'bas_id' : bas_id }) }}" style="margin:0;">
             <span class="btn btn-success fileinput-button">
-                <i class="icon-plus icon-white"></i>
+                <i class="fa fa-plus icon-white" aria-hidden="true"></i>
                 <span>{% trans %}Select files...{% endtrans %}</span>
                 <input name="newWm" type="file" accept="image/*" />
             </span>
@@ -197,7 +197,7 @@
         {% if app.getAclForUser(app.getAuthenticatedUser()).has_right_on_base(bas_id, constant('\\ACL::COLL_MANAGE')) %}
             <form method="post" action="{{ path('admin_collection_delete_stamp', { 'bas_id' : bas_id }) }}" style="margin:0;">
                 <button class="btn btn-danger btn-mini">
-                    <i class="icon-trash icon-white"></i>
+                    <i class="fa fa-trash-o icon-white" aria-hidden="true"></i>
                     {{ 'boutton::supprimer' | trans }}
                 </button>
             </form>
@@ -206,7 +206,7 @@
         <span>{{ 'admin::base:collection: aucun fichier (minilogo, watermark ...)' | trans }}</span>
         <form class="fileupload no-ajax" enctype="multipart/form-data" method="post" action="{{ path('admin_collection_submit_stamp', { 'bas_id' : bas_id }) }}" style="margin:0;">
             <span class="btn btn-success fileinput-button">
-                <i class="icon-plus icon-white"></i>
+                <i class="fa fa-plus icon-white" aria-hidden="true"></i>
                 <span>{% trans %}Select files...{% endtrans %}</span>
                 <input name="newStamp" type="file" accept="image/*" />
             </span>

templates/web/admin/collection/reorder.html.twig

@@ -15,8 +15,16 @@
         </td>
          <td valign="center" align="left">
              <ul style="list-style:none;">
-                <li><button class="btn" id="upbutton" disabled><i class="icon-chevron-up"></i>{{ 'admin::base:collorder: monter' | trans }}</button></li>
+                 <li>
-                <li><button class="btn" id="downbutton" disabled ><i class="icon-chevron-down"></i>{{ 'admin::base:collorder: descendre' | trans }}</button></li>
+                     <button class="btn" id="upbutton" disabled><i class="fa fa-chevron-up"
+                                                                   aria-hidden="true"></i>{{ 'admin::base:collorder: monter' | trans }}
+                     </button>
+                 </li>
+                 <li>
+                     <button class="btn" id="downbutton" disabled><i class="fa fa-chevron-down"
+                                                                     aria-hidden="true"></i>{{ 'admin::base:collorder: descendre' | trans }}
+                     </button>
+                 </li>
                 <li><a href="#" id="natcase-reorder">{{ 'admin::base:collorder: reinitialiser en ordre alphabetique' | trans }}</a></li>
             </ul>
         </td>

templates/web/admin/fields/templates.html.twig

@@ -5,7 +5,7 @@
 
 <script type="text/template" id="save_template">
     <button type="button" class="btn btn-primary save-all">
-        <i class="icon-hdd icon-white"></i> {% trans %}Save all changes{% endtrans %}
+        <i class="fa fa-hdd-o icon-white" aria-hidden="true"></i> {% trans %}Save all changes{% endtrans %}
     </button>
 </script>
 
@@ -39,7 +39,9 @@
     <div class="row-fluid">
         <div class="span12">
             <div class="sidebar-add-block">
-                <button type="button" class="btn btn-success btn-add-field"><i class="icon-plus icon-white"></i>{% trans %}Add a new field{% endtrans %}</button>
+                <button type="button" class="btn btn-success btn-add-field"><i class="fa fa-plus icon-white"
+                                                                               aria-hidden="true"></i>{% trans %}Add a
+                    new field{% endtrans %}</button>
             </div>
             <div class="well well-small add-field-block" style="display:none">
                 <h3>{% trans %}Add a new field{% endtrans %}</h3>
@@ -60,7 +62,9 @@
                     </div>
                     <div class="control-group">
                         <div class="controls">
-                            <button type="button" class="btn btn-success btn-submit-field"><i class="icon-ok icon-white"></i>{% trans %}Add{% endtrans %}</button>
+                            <button type="button" class="btn btn-success btn-submit-field"><i
+                                        class="fa fa-check icon-white" aria-hidden="true"></i>{% trans %}
+                                Add{% endtrans %}</button>
                             <button type="button" class="btn btn-cancel-field">{% trans %}Cancel{% endtrans %}</button>
                         </div>
                     </div>
@@ -77,7 +81,11 @@
             <tr class="edit-order">
                 <td>{% trans %}Order{% endtrans %}</td>
                 <td><%= field.sorter %></td>
-                <td><button type="button" class="btn btn-danger delete-field pull-right"><i class="icon-trash icon-white"></i>delete</button></td>
+                <td>
+                    <button type="button" class="btn btn-danger delete-field pull-right"><i
+                                class="fa fa-trash-o icon-white" aria-hidden="true"></i>delete
+                    </button>
+                </td>
             </tr>
             <tr class="edit-name">
                 <td colspan="2">
@@ -249,14 +257,14 @@
     <table>
         <tr>
             <td class="handle">
-                <i class="icon-move"></i>
+                <i class="fa fa-arrows" aria-hidden="true"></i>
             </td>
             <td rowspan="2" class="trigger-click">
                 <div class="field-name"><%= name %></div>
                 <div class="field-tag"><%= tag %></div>
             </td>
             <td rowspan="2" class="chip trigger-click">
-                <i class="icon-chevron-right"></i>
+                <i class="fa fa-chevron-right" aria-hidden="true"></i>
             </td>
         </tr>
         <tr>
@@ -279,7 +287,8 @@
 <script type="text/template" id="field_error_template">
     <% if(messages.length > 0) { %>
         <div class="well well-small">
-            <i class="icon-exclamation-sign"></i> {% trans %}Current configuration contains some errors{% endtrans %}
+            <i class="fa fa-exclamation-circle" aria-hidden="true"></i> {% trans %}Current configuration contains some
+            errors{% endtrans %}
         </div>
     <% } %>
 </script>

templates/web/admin/index.html.twig

@@ -8,7 +8,7 @@
 {% endblock %}
 
 {% block stylesheet %}
-    <link rel="stylesheet" href="/bower_components/jquery-simplecolorpicker/jquery.simplecolorpicker.css">
+    <link rel="stylesheet" href="/assets/vendors/jquery-simplecolorpicker/jquery.simplecolorpicker.css">
     <link type="text/css" rel="stylesheet" href="/assets/admin/css/admin{% if not app.debug %}.min{% endif %}.css" />
 {% endblock %}
 

templates/web/admin/plugins/show_fallback.html.twig

@@ -52,7 +52,7 @@
                     contentsDownloaded[e.target.hash] = true;
                 }, function(error) {
                     console.log(error);
-                    targetDiv.empty().html('<i class="icon-fire">{{ 'admin::plugins: retrieveConfigurationError'|trans }}</i>');
+                    targetDiv.empty().html('<i class="fa fa-fire" aria-hidden="true">{{ 'admin::plugins: retrieveConfigurationError'|trans }}</i>');
                 });
             }
         });

templates/web/admin/statusbit/edit.html.twig

@@ -51,7 +51,7 @@
                 </label>
                 <div class="controls clearfix">
                     <span class="btn btn-success fileinput-button pull-left">
-                        <i class="icon-plus icon-white"></i>
+                        <i class="fa fa-plus icon-white" aria-hidden="true"></i>
                         <span>{% trans %}Select files...{% endtrans %}</span>
                         <input type="file" name="image_off" accept="image/jpg, image/png"/>
                     </span>
@@ -115,7 +115,7 @@
                 </label>
                 <div class="controls clearfix">
                     <span class="btn btn-success fileinput-button pull-left">
-                        <i class="icon-plus icon-white"></i>
+                        <i class="fa fa-plus icon-white" aria-hidden="true"></i>
                         <span>{% trans %}Select files...{% endtrans %}</span>
                         <input type="file" name="image_on" accept="image/jpg, image/png"/>
                     </span>

templates/web/admin/task-manager/index.html.twig

@@ -15,9 +15,9 @@
             <tr>
                 <th class="refresh-view" style="width:80px;"  data-refresh-url="{{ path('admin_tasks_live_info') }}">
                     <button class="btn btn-refresh">
-                        <i class="icon icon-refresh"/>
+                        <i class="icon fa fa-refresh" aria-hidden="true"/>
                     </button>
-                    <i id="spinner" style="font-size:16px" class='icon-spinner icon-spin'>
+                    <i id="spinner" style="font-size:16px" class="fa fa-spinner icon-spin" aria-hidden="true">
                 </th>
                 <th>ID</th>
                 <th>PID</th>

templates/web/admin/user/import/file.html.twig

@@ -33,13 +33,17 @@
 
 <div>
     <div class="well well-small">
-        <a target="_blank" href="{{ path('users_import_csv') }}" class="no-ajax"> <i class="icon-share"></i> {{ 'You can  download an example by clicking here' | trans }}</a>
+        <a target="_blank" href="{{ path('users_import_csv') }}" class="no-ajax"> <i class="fa fa-share-square-o"
+                                                                                     aria-hidden="true"></i> {{ 'You can  download an example by clicking here' | trans }}
+        </a>
     </div>
     <div class="well well-small">
-        <a target="_blank" href="{{ path('users_import_rtf') }}" class="no-ajax"> <i class="icon-share"></i> {{ 'You can download the documentation here' | trans }}</a>
+        <a target="_blank" href="{{ path('users_import_rtf') }}" class="no-ajax"> <i class="fa fa-share-square-o"
+                                                                                     aria-hidden="true"></i> {{ 'You can download the documentation here' | trans }}
+        </a>
     </div>
     <span class="btn btn-success fileinput-button">
-        <i class="icon-plus icon-white"></i>
+        <i class="fa fa-plus icon-white" aria-hidden="true"></i>
         <span>{% trans %}Select files...{% endtrans %}</span>
         <input id="fileupload" type="file" name="files" data-url="/admin/users/import/file/" accept="text/csv, text/rtf">
     </span>

templates/web/common/macros.html.twig

@@ -15,7 +15,8 @@
                 </div>
                 <div class="row-fluid recaptcha_only_if_incorrect_sol">
                     <div class="alert-error" style="padding:2px;margin: 2px 0;border:1px solid #c9322b">
-                        <i class="icon-warning-sign"></i> {{ "Incorrect please try again" | trans }}
+                        <i class="fa fa-exclamation-triangle"
+                           aria-hidden="true"></i> {{ "Incorrect please try again" | trans }}
                     </div>
                 </div>
 
@@ -28,9 +29,13 @@
                                 </td>
                                 <td style="width:70px;"class="text-right hidden-phone">
                                     <div class="btn-group">
-                                        <a href="javascript:Recaptcha.reload()" class="btn btn-mini btn-info"><i class="icon-refresh"></i></a>
+                                        <a href="javascript:Recaptcha.reload()" class="btn btn-mini btn-info"><i
-                                        <a href="javascript:Recaptcha.switch_type('image')" class="btn btn-mini  btn-info"><i class="icon-volume-up"></i></a>
+                                                    class="fa fa-refresh" aria-hidden="true"></i></a>
-                                        <a href="javascript:Recaptcha.showhelp()" class="btn btn-mini btn-info"><i class="icon-question-sign"></i></a>
+                                        <a href="javascript:Recaptcha.switch_type('image')"
+                                           class="btn btn-mini  btn-info"><i class="fa fa-volume-up"
+                                                                             aria-hidden="true"></i></a>
+                                        <a href="javascript:Recaptcha.showhelp()" class="btn btn-mini btn-info"><i
+                                                    class="fa fa-question-sign" aria-hidden="true"></i></a>
                                     </div>
                                 </td>
                             </tr>
@@ -38,9 +43,12 @@
                                 <td>
                                     <div class="btn-toolbar">
                                         <div class="btn-group text-right">
-                                            <a href="javascript:Recaptcha.reload()" class="btn btn-info"><i class="icon-refresh"></i></a>
+                                            <a href="javascript:Recaptcha.reload()" class="btn btn-info"><i
-                                            <a href="javascript:Recaptcha.switch_type('image')" class="btn btn-info"><i class="icon-volume-up"></i></a>
+                                                        class="fa fa-refresh" aria-hidden="true"></i></a>
-                                            <a href="javascript:Recaptcha.showhelp()" class="btn  btn-info"><i class="icon-question-sign"></i></a>
+                                            <a href="javascript:Recaptcha.switch_type('image')" class="btn btn-info"><i
+                                                        class="fa fa-volume-up" aria-hidden="true"></i></a>
+                                            <a href="javascript:Recaptcha.showhelp()" class="btn  btn-info"><i
+                                                        class="fa fa-question-sign" aria-hidden="true"></i></a>
                                         </div>
                                     </div>
                                 </td>
@@ -67,7 +75,7 @@
                 <table>
                     <tr>
                         <td class="alert-block-logo">
-                            <i class="icon-2x icon-white icon-exclamation-sign"></i>
+                            <i class="fa-2x icon-white fa fa-exclamation-circle" aria-hidden="true"></i>
                         </td>
                         <td class="alert-block-content">{{ message }}</td>
                         <td class="alert-block-close">

templates/web/common/menubar.html.twig

@@ -139,7 +139,7 @@
             <span>
               {{ 'phraseanet:: aide' | trans }}
                 <span style="display:inline-block;cursor:pointer;padding:0;border:none;padding-right:4px;padding-left:4px;"
-                      id="help-trigger"> <i class="icon-caret-down"></i></span>
+                      id="help-trigger"> <i class="fa fa-caret-down" aria-hidden="true"></i></span>
             </span>
           </a>
           <table cellspacing="0" cellpadding="0" style="display:none;" class="contextMenu helpcontextmenu">

templates/web/lightbox/feed_options_box.html.twig

@@ -1,25 +1,25 @@
 <span style="padding:10px 4px 7px;">
     {% if feed_element %}
         <button class="previous_button play btn btn-mini" title="{{ 'boutton::precedent' | trans }}">
-            <i class="icon-chevron-left"></i>
+            <i class="fa fa-chevron-left" aria-hidden="true"></i>
         </button>
         <button class="previous_button pause btn btn-mini btn-inverse" title="{{ 'boutton::precedent' | trans }}">
-            <i class="icon-chevron-left icon-white"></i>
+            <i class="fa fa-chevron-left icon-white" aria-hidden="true"></i>
         </button>
         <button class="play_button btn btn-mini" title="{{ 'boutton::demarrer' | trans }}">
-            <i class="icon-play"></i>
+            <i class="fa fa-play" aria-hidden="true"></i>
         </button>
         <button class="pause_button btn btn-mini" title="{{ 'boutton::pause' | trans }}">
-            <i class="icon-pause"></i>
+            <i class="fa fa-pause" aria-hidden="true"></i>
         </button>
         <button class="next_button play btn btn-mini" title="{{ 'boutton::suivant' | trans }}">
-            <i class="icon-chevron-right"></i>
+            <i class="fa fa-chevron-right" aria-hidden="true"></i>
         </button>
         <button class="next_button pause btn btn-mini btn-inverse" title="{{ 'boutton::suivant' | trans }}">
-            <i class="icon-chevron-right icon-white"></i>
+            <i class="fa fa-chevron-right icon-white" aria-hidden="true"></i>
         </button>
         <button class="download_button btn btn-mini btn-inverse" title="{{ 'boutton::telecharger' | trans }}">
-            <i class="icon-download icon-white"></i>
+            <i class="fa fa-arrow-circle-o-down icon-white" aria-hidden="true"></i>
         </button>
         <form name="download_form" style="display:none;">
             <input type="hidden" name="basrec" value="{{feed_element.getRecord(app).get_serialize_key()}}"/>

templates/web/lightbox/sc_options_box.html.twig

@@ -1,25 +1,25 @@
 <span style="padding:10px 4px 7px;">
     {% if basket_element %}
         <button class="previous_button play btn btn-mini" title="{{ 'boutton::precedent' | trans }}">
-            <i class="icon-chevron-left"></i>
+            <i class="fa fa-chevron-left" aria-hidden="true"></i>
         </button>
         <button class="previous_button pause btn btn-mini btn-inverse" title="{{ 'boutton::precedent' | trans }}" style="display:none">
-            <i class="icon-chevron-left icon-white"></i>
+            <i class="fa fa-chevron-left icon-white" aria-hidden="true"></i>
         </button>
         <button class="play_button btn btn-mini" title="{{ 'boutton::demarrer' | trans }}">
-            <i class="icon-play"></i>
+            <i class="fa fa-play" aria-hidden="true"></i>
         </button>
         <button class="pause_button btn btn-mini" title="{{ 'boutton::pause' | trans }}" style="display:none">
-            <i class="icon-pause"></i>
+            <i class="fa fa-pause" aria-hidden="true"></i>
         </button>
         <button class="next_button play btn btn-mini" title="{{ 'boutton::suivant' | trans }}">
-            <i class="icon-chevron-right"></i>
+            <i class="fa fa-chevron-right" aria-hidden="true"></i>
         </button>
         <button class="next_button pause btn btn-mini btn-inverse" title="{{ 'boutton::suivant' | trans }}" style="display:none">
-            <i class="icon-chevron-right icon-white"></i>
+            <i class="fa fa-chevron-right icon-white" aria-hidden="true"></i>
         </button>
         <button class="download_button btn btn-mini btn-inverse" title="{{ 'boutton::telecharger' | trans }}">
-            <i class="icon-download icon-white"></i>
+            <i class="fa fa-arrow-circle-o-down icon-white" aria-hidden="true"></i>
         </button>
         <form name="download_form" style="display:none;">
             <input type="hidden" name="basrec" value="{{basket_element.getRecord(app).get_serialize_key()}}"/>
@@ -27,7 +27,7 @@
          |
         {% if basket_element.getBasket().getValidation() %}
             <button class="comment_button btn btn-mini btn-inverse">
-                <i class="icon-edit icon-white"></i>
+                <i class="fa fa-pencil-square-o icon-white" aria-hidden="true"></i>
                 {% set n = 0 %}
                 {% for validationData in basket_element.getValidationDatas() %}
                   {% if validationData.getNote() %}

templates/web/login/common/macros.html.twig

@@ -11,7 +11,7 @@
     <table class="input-table">
         <tr>
             <td class="icon">
-                <i class="{{ icon_name|default('icon-angle-right') }} icon-white"></i>
+                <i class="{{ icon_name|default('fa fa-angle-right') }} icon-white"></i>
             </td>
             <td class="input">
                 {{  form_widget(field, { 'attr': attributes })}}
@@ -70,7 +70,8 @@
         <div class="popover-content">
             <table>
                 <tr>
-                    <td style="width:35px;"><i class="icon-warning-sign icon-white"></i></td>
+                    <td style="width:35px;"><i class="fa fa-exclamation-triangle icon-white" aria-hidden="true"></i>
+                    </td>
                         {% if errors|keys|length >= 1 %}
                             {% for error in errors %}
                                 <td>
@@ -122,16 +123,16 @@
     <div class="authentication-user-pres-phraseanet well">
         <ul class="unstyled">
             <li class="one-line">
-                <i class="icon-user"></i>{{ user.getDisplayName() }}
+                <i class="fa fa-user" aria-hidden="true"></i>{{ user.getDisplayName() }}
             </li>
             {% if user.getEmail() %}
             <li class="one-line">
-                <i class="icon-envelope"></i>{{ user.getEmail() }}
+                <i class="fa fa-envelope" aria-hidden="true"></i>{{ user.getEmail() }}
             </li>
             {% endif %}
             {% if user.getCompany() %}
             <li class="one-line">
-                <i class="icon-briefcase"></i>{{ user.getCompany() }}
+                <i class="fa fa-briefcase" aria-hidden="true"></i>{{ user.getCompany() }}
             </li>
             {% endif %}
         </ul>
@@ -140,19 +141,19 @@
 
 {% macro alert(type, message) %}
     <div class="alert alert-{{ type }}">
-        {% set sign = "icon-exclamation-sign" %}
+        {% set sign = "fa fa-exclamation-circle" %}
 
         {% if type == "error" %}
-             {% set sign = "icon-warning-sign" %}
+            {% set sign = "fa fa-exclamation-triangle" %}
         {% elseif type == "success" %}
-             {% set sign = "icon-ok-sign" %}
+            {% set sign = "fa fa-check-circle" %}
         {% elseif type == "info" %}
-             {% set sign = "icon-info-sign" %}
+            {% set sign = "fa fa-info-circle" %}
         {% endif %}
 
         <table>
             <tr>
-                <td class="alert-block-logo"><i class="icon-2x icon-white {{ sign }}"></i></td>
+                <td class="alert-block-logo"><i class="fa-2x icon-white {{ sign }}"></i></td>
                 <td class="alert-block-content">{{ message }}</td>
                 <td class="alert-block-close"><a href="#"><b>&times;</b></a></td>
             </tr>

templates/web/login/common/templates.html.twig

@@ -4,7 +4,8 @@
         <div class="popover-content">
             <table>
                 <tr>
-                    <td style="width:35px;"><i class="icon-warning-sign icon-white"></i></td>
+                    <td style="width:35px;"><i class="fa fa-exclamation-triangle icon-white" aria-hidden="true"></i>
+                    </td>
                     <td>
                         <% _.each(errors, function(error) { %>
                             <div><%= error.message %></div>

templates/web/login/forgot-password.html.twig

@@ -36,7 +36,7 @@
                     {% endif %}
                     <div class="row-fluid">
                         <div class="span12">
-                            {{ auth_macro.fieldInput(form.email, "forgottenPasswordForm", "icon-envelope") }}
+                            {{ auth_macro.fieldInput(form.email, "forgottenPasswordForm", "fa fa-envelope") }}
                         </div>
                     </div>
                     {{ form_rest(form) }}

templates/web/login/include/language-block.html.twig

@@ -1,6 +1,7 @@
 <div id="authentication-sidebar-language" class="text-right well-small clearfix">
     <div class="pull-left">
-        <a href="{{ path("homepage") }}" title="{{ "Home" | trans }}"><i class="icon-home icon-white"></i></a>
+        <a href="{{ path("homepage") }}" title="{{ "Home" | trans }}"><i class="fa fa-home icon-white"
+                                                                         aria-hidden="true"></i></a>
     </div>
     <div class="pull-right btn-group">
         <button id="language-button" class="btn btn-mini btn-flat dropdown-toggle" data-toggle="dropdown" type="button">

templates/web/login/index.html.twig

@@ -57,12 +57,12 @@
 
                     <div class="row-fluid">
                         <div class="span12">
-                            {{ auth_macro.fieldInput(form.login, "loginForm", 'icon-envelope') }}
+                            {{ auth_macro.fieldInput(form.login, "loginForm", 'fa fa-envelope') }}
                         </div>
                     </div>
                     <div class="row-fluid">
                         <div class="span12">
-                            {{ auth_macro.fieldInput(form.password, "loginForm", 'icon-lock') }}
+                            {{ auth_macro.fieldInput(form.password, "loginForm", 'fa fa-lock') }}
                         </div>
                     </div>
                     <div class="text-right">

templates/web/login/oauth/login.html.twig

@@ -45,12 +45,12 @@
                     {% endif %}
                     <div class="row-fluid">
                         <div class="span12">
-                            {{ auth_macro.fieldInput(form.email, "loginForm", 'icon-envelope') }}
+                            {{ auth_macro.fieldInput(form.email, "loginForm", 'fa fa-envelope') }}
                         </div>
                     </div>
                     <div class="row-fluid">
                         <div class="span12">
-                            {{ auth_macro.fieldInput(form.password, "loginForm", 'icon-lock') }}
+                            {{ auth_macro.fieldInput(form.password, "loginForm", 'fa fa-lock') }}
                         </div>
                     </div>
                     <div class="text-right">

templates/web/login/providers/bind.html.twig

@@ -46,12 +46,12 @@
                     {% endif %}
                     <div class="row-fluid">
                         <div class="span12">
-                            {{ auth_macro.fieldInput(form.login, "loginForm", 'icon-envelope') }}
+                            {{ auth_macro.fieldInput(form.login, "loginForm", 'fa fa-envelope') }}
                         </div>
                     </div>
                     <div class="row-fluid">
                         <div class="span12">
-                            {{ auth_macro.fieldInput(form.password, "loginForm", 'icon-lock') }}
+                            {{ auth_macro.fieldInput(form.password, "loginForm", 'fa fa-lock') }}
                         </div>
                     </div>
                     <div class="text-right">

templates/web/login/providers/mapping.html.twig

@@ -62,12 +62,12 @@
                     {% endif %}
                     <div class="row-fluid hidden">
                         <div class="span12">
-                            {{ auth_macro.fieldInput(form.login, "loginForm", 'icon-envelope', {'value' : 'nard', 'autocomplete' : 'off' }) }}
+                            {{ auth_macro.fieldInput(form.login, "loginForm", 'fa fa-envelope', {'value' : 'nard', 'autocomplete' : 'off' }) }}
                         </div>
                     </div>
                     <div class="row-fluid">
                         <div class="span12">
-                            {{ auth_macro.fieldInput(form.password, "loginForm", 'icon-lock') }}
+                            {{ auth_macro.fieldInput(form.password, "loginForm", 'fa fa-lock') }}
                         </div>
                     </div>
                     <div class="text-right">

templates/web/login/register-classic.html.twig

@@ -40,11 +40,11 @@
 
                     <div class="row-fluid">
                         <div class="span12">
-                            {{ auth_macro.fieldInput(form.email, "registerForm", 'icon-envelope') }}
+                            {{ auth_macro.fieldInput(form.email, "registerForm", 'fa fa-envelope') }}
                         </div>
                     </div>
 
-                    {{ auth_macro.repeatedInput(form.password, "registerForm", 'icon-lock') }}
+                    {{ auth_macro.repeatedInput(form.password, "registerForm", 'fa fa-lock') }}
 
                     {% for field in registration_fields %}
                         {% set name = field['name'] %}

templates/web/login/register-provider.html.twig

@@ -41,7 +41,7 @@
                     {% endif %}
                     <div class="row-fluid">
                         <div class="span12">
-                            {{ auth_macro.fieldInput(form.email, "registerForm", 'icon-envelope') }}
+                            {{ auth_macro.fieldInput(form.email, "registerForm", 'fa fa-envelope') }}
                         </div>
                     </div>
 

templates/web/login/register.html.twig

@@ -22,7 +22,7 @@
                         {{ "Create an account manually" | trans }}
                     </span>
                     <span class="pull-right">
-                        <i class="icon-arrow-right icon-white"></i>
+                        <i class="fa fa-arrow-right icon-white" aria-hidden="true"></i>
                     </span>
                 </a>
             </div>

templates/web/login/renew-password.html.twig

@@ -32,7 +32,7 @@
                         </div>
                     {% endif %}
 
-                    {{ auth_macro.repeatedInput(form.password, "passwordRenewForm", 'icon-lock') }}
+                    {{ auth_macro.repeatedInput(form.password, "passwordRenewForm", 'fa fa-lock') }}
 
                     {{ form_rest(form) }}
                     <div class="row-fluid">

templates/web/prod/WorkZone/Macros.html.twig

@@ -314,7 +314,7 @@
               href="#"
             {% endif %}
             class="WorkZoneElementRemover {{ wz_scope }}" title="{{ 'delete' | trans }}" >
-              <i class="icon-remove"></i>
+              <i class="fa fa-times" aria-hidden="true"></i>
           </a>
           {% if app['settings'].getUserSetting(app.getAuthenticatedUser(), 'basket_caption_display') == '1' %}
               <div class="captionRolloverTips" tooltipsrc="{{ path('prod_tooltip_caption', { 'sbas_id' : record.get_sbas_id(), 'record_id' : record.get_record_id(), 'context' : 'basket', 'number' : record.getNumber() }) }}"></div>

templates/web/prod/actions/Tools/index.html.twig

@@ -211,7 +211,8 @@
 
     <div id="image" class="tabBox">
       <div class="text-info">
-          <i class=" icon-info-sign"></i> {% trans %}Changes for rotation will be applied only on the sub-definitions of "image" type.{% endtrans %}
+          <i class="fa fa-info-circle" aria-hidden="true"></i> {% trans %}Changes for rotation will be applied only on
+          the sub-definitions of "image" type.{% endtrans %}
       </div>
       <form name="formpushdoc" action="{{ path('prod_tools_rotate') }}" method="post">
         <fieldset style='border:1px solid #999;padding:20px;'>
@@ -242,7 +243,8 @@
         <div id="substitution" class="tabBox">
 
          {% if "unknown" == record.get_type() %}
-            <i class="icon-warning-sign icon-white"></i>{{ "Substitution is not possible for this kind of record" | trans }}
+             <i class="fa fa-exclamation-triangle icon-white"
+                aria-hidden="true"></i>{{ "Substitution is not possible for this kind of record" | trans }}
          {% else %}
             {% if app['conf'].get(['registry', 'modules', 'doc-substitution']) %}
                 <div id="substitution-hd">

templates/web/prod/actions/edit_default.html.twig

@@ -43,14 +43,16 @@
         </div>
         <div style='position:absolute; bottom:0px; left:0px; height:20px' class="bottom actions">
 
-            <span class="icon-stack previewTips" tooltipsrc="{{ path('prod_tooltip_preview', { 'sbas_id' : record.get_sbas_id(), 'record_id' : record.get_record_id() }) }}">
+            <span class="fa-stack previewTips"
-                <i class="icon-circle icon-stack-base"></i>
+                  tooltipsrc="{{ path('prod_tooltip_preview', { 'sbas_id' : record.get_sbas_id(), 'record_id' : record.get_record_id() }) }}">
-                <i class="icon-search icon-light"></i>
+                <i class="fa fa-circle fa-stack-2x" aria-hidden="true"></i>
+                <i class="fa fa-search fa-stack-1x fa-reverse" aria-hidden="true"></i>
             </span>
 
-            <span class="icon-stack infoTips" tooltipsrc="{{ path('prod_tooltip_technical_data', { 'sbas_id' : record.get_sbas_id(), 'record_id' : record.get_record_id() }) }}">
+            <span class="fa-stack infoTips"
-                <i class="icon-circle icon-stack-base"></i>
+                  tooltipsrc="{{ path('prod_tooltip_technical_data', { 'sbas_id' : record.get_sbas_id(), 'record_id' : record.get_record_id() }) }}">
-                <i class="icon-info icon-light"></i>
+                <i class="fa fa-circle fa-stack-2x" aria-hidden="true"></i>
+                <i class="fa fa-info fa-stack-1x fa-reverse" aria-hidden="true"></i>
             </span>
         </div>
         <div class="reg_opts" style="display:none;position:absolute;bottom:0;right:0;">
@@ -92,10 +94,11 @@
             <div class="edit_field edit-field-action" id="EditFieldBox_{{i}}"
                  data-id="{{i}}"
                  data-name="{{field.get_name()}}">
-                <i id="editSGtri_{{i}}" style="visibility:hidden;" class="icon-caret-right"></i>
+                <i id="editSGtri_{{ i }}" style="visibility:hidden;" class="fa fa-caret-right" aria-hidden="true"></i>
-                <span class="icon-stack fieldTips" tooltipsrc="{{ path('prod_tooltip_metadata', { 'sbas_id' : field.get_databox().get_sbas_id(), 'field_id' : field.get_id() }) }}">
+                <span class="fa-stack fieldTips"
-                  <i class="icon-circle icon-stack-base"></i>
+                      tooltipsrc="{{ path('prod_tooltip_metadata', { 'sbas_id' : field.get_databox().get_sbas_id(), 'field_id' : field.get_id() }) }}">
-                  <i class="icon-info icon-light"></i>
+                  <i class="fa fa-circle fa-stack-2x" aria-hidden="true"></i>
+                  <i class="fa fa-info fa-stack-1x fa-inverse" aria-hidden="true"></i>
                 </span>
                 {% if field.get_dces_element %}
                     <img src="/assets/common/images/icons/dublincore.png" tooltipsrc="{{ path('prod_tooltip_dces', { 'sbas_id' : field.get_databox().get_sbas_id(), 'field_id' : field.get_id() }) }}" alt="{{ 'Ce champ est decrit comme un element DublinCore' | trans }}" class="DCESTips" />

templates/web/prod/actions/publish/publish.html.twig

@@ -37,7 +37,8 @@
                         {% if app['conf'].get(['registry', 'actions', 'enable-feed-notification']) %}
                         <label class="checkbox">
                             <input class="required_text checkbox" type="checkbox" name="notify" id="feed_add_notify" value="1" style="min-height: 0; height: auto" />
-                            <i class="icon icon-envelope"></i>&nbsp;{{ 'Notify users about this publication' | trans }}
+                            <i class="icon fa fa-envelope"
+                               aria-hidden="true"></i>&nbsp;{{ 'Notify users about this publication' | trans }}
                         </label>
                         <br />
                         {% endif %}

templates/web/prod/index.html.twig

@@ -173,7 +173,7 @@
             <div class="PNB wrapper">
                 <div class="tabs ui-tabs">
                     {% block tabs_panel %}
-                        <div id="retractableButton"><i class="icon-double-angle-left"></i></div>
+                        <div id="retractableButton"><i class="fa fa-angle-double-left" aria-hidden="true"></i></div>
                         {% include 'prod/tab_headers.html.twig' %}
                         <div id="baskets" class="PNB">
                             {% import 'prod/WorkZone/Macros.html.twig'  as  WorkZoneMacros %}
@@ -443,12 +443,14 @@
                                                     <span id="ADVSRCH_DATE_SELECTORS">
                                                         {{ 'phraseanet::time:: de' | trans }}
                                                         <div class="input-prepend">
-                                                            <span class="add-on"><i class="icon-calendar"></i></span>
+                                                            <span class="add-on"><i class="fa fa-calendar"
+                                                                                    aria-hidden="true"></i></span>
                                                             <input onchange="prodApp.appEvents.emit('search.doCheckFilters', true);" class="datepicker input-small" type="text" name="date_min" placeholder="{% trans %}YYYY/MM/DD{% endtrans %}" style="margin: 0;position: relative; z-index: 10001;" />
                                                         </div>
                                                         {{ 'phraseanet::time:: a' | trans }}
                                                         <div class="input-prepend">
-                                                            <span class="add-on"><i class="icon-calendar"></i></span>
+                                                            <span class="add-on"><i class="fa fa-calendar"
+                                                                                    aria-hidden="true"></i></span>
                                                             <input onchange="prodApp.appEvents.emit('search.doCheckFilters', true);" class="datepicker input-small" type="text" name="date_max" placeholder="{% trans %}YYYY/MM/DD{% endtrans %}" style="margin: 0;position: relative; z-index: 10001;" />
                                                         </div>
                                                     </span>
@@ -733,10 +735,10 @@
                     </div>
                     <div class="PNB10" style="top:146px;">
                         <button id="left-btn" class="invisible-btn preview-navigate-action" data-direction="backward">
-                            <i class="icon-caret-left"></i>
+                            <i class="fa fa-caret-left" aria-hidden="true"></i>
                         </button>
                         <button id="right-btn" class="invisible-btn preview-navigate-action" data-direction="forward">
-                            <i class="icon-caret-right"></i>
+                            <i class="fa fa-caret-right" aria-hidden="true"></i>
                         </button>
                     </div>
                     <div id="PREVIEWIMGCONT" class="dblclick preview_col_cont PNB10" style="overflow:hidden;top:146px;"></div>

templates/web/prod/orders/order_box.html.twig

@@ -23,7 +23,7 @@
     <div id="ORDERPREVIEW">
         <div id="filter-date">
             <a href="#"><span id="filter-text">{{ 'order-manager::order-list: no-filter' | trans }}</span> <span class="order-indicator">&#x25bc;</span></a>
-            <i class="icon-remove-sign reset-btn" style="display: none"></i>
+            <i class="fa fa-times-circle reset-btn" aria-hidden="true" style="display: none"></i>
         </div>
         <div>
             <form id="date-form">
@@ -52,7 +52,7 @@
                             <button class="toggle-button-text" type="button" name="BEFORE">{{ 'order-manager::order-list: before' | trans }}</button>
                             <button class="toggle-button-text" type="button" name="AFTER">{{ 'order-manager::order-list: after' | trans }}</button>
                             <div class="input-prepend">
-                                <span class="add-on"><i class="icon icon-calendar"></i></span>
+                                <span class="add-on"><i class="icon fa fa-calendar" aria-hidden="true"></i></span>
                                 <input type="text" id="datepicker" class="datepicker" name="datepicker" size="10" value="{{ "today"|date("Y/m/d") }}" />
                             </div>
                         </td>
@@ -68,14 +68,14 @@
         </div>
         <ul style="height:30px;bottom:auto;">
             <li><a href="#TODO-ORDER">{{ 'order-manager::order-list: pending' | trans }}
-                    <span class="icon-stack infoTips">
+                    <span class="fa-stack infoTips">
-                    <i class="icon-circle icon-stack-base" style="color:#7CD11E"></i>
+                    <i class="fa fa-circle fa-stack-2x" aria-hidden="true" style="color:#7CD11E"></i>
-                    <i class="icon-exclamation" style="color:#FFF"></i>
+                    <i class="fa fa-exclamation fa-stack-1x" aria-hidden="true" style="color:#FFF"></i>
                     </span></a></li>
             <li><a href="#PROCESSED-ORDER">{{ 'order-manager::order-list: processed' | trans }}
-                    <span class="icon-stack infoTips">
+                    <span class="fa-stack infoTips">
-                    <i class="icon-circle icon-stack-base" style="color:#999"></i>
+                    <i class="fa fa-circle fa-stack-2x" aria-hidden="true" style="color:#999"></i>
-                    <i class="icon-check" style="color:#FFF"></i>
+                    <i class="fa fa-check-square-o fa-stack-1x" aria-hidden="true" style="color:#FFF"></i>
                     </span></a></li></a></li>
         </ul>
         <div id="TODO-ORDER" class="order_preview_box">
@@ -86,9 +86,9 @@
                         {% for order in orders_todo %}
                             {% set deadline = order.getDeadline()|date('d/m/Y') %}
                             <tr id="order_{{ order.getId() }}" class="order_row" {{ current_date > order.getDeadline() ? "style=color:#777": "" }}>
-                                <td> <span class="icon-stack infoTips">
+                                <td> <span class="fa-stack infoTips">
-                                <i class="icon-circle icon-stack-base" style="color:#7CD11E"></i>
+                                <i class="fa fa-circle fa-stack-2x" aria-hidden="true" style="color:#7CD11E"></i>
-                                <i class="icon-exclamation" style="color:#FFF"></i>
+                                <i class="fa fa-exclamation fa-stack-1x" aria-hidden="true" style="color:#FFF"></i>
                                 </span>
                                 </td>
                                 <td>
@@ -136,9 +136,10 @@
                         {% for order in orders_processed %}
                             {% set deadline = order.getDeadline()|date('d/m/Y') %}
                             <tr id="order_{{ order.getId() }}" class="order_row" {{ current_date > order.getDeadline() ? "style=color:#777": "" }}>
-                                <td> <span class="icon-stack infoTips">
+                                <td> <span class="fa-stack infoTips">
-                                    <i class="icon-circle icon-stack-base" style="color:#999"></i>
+                                    <i class="fa fa-circle fa-stack-2x" aria-hidden="true" style="color:#999"></i>
-                                    <i class="icon-check" style="color:#FFF"></i>
+                                    <i class="fa fa-check-square-o fa-stack-1x" aria-hidden="true"
+                                       style="color:#FFF"></i>
                                     </span>
                                 </td>
                                 <td>
@@ -185,10 +186,13 @@
             {% set previousPage = page < 2 ? false : (page - 1) %}
             {% set nextPage = page >= (totalTodo / perPage)|ceil ? false : (page + 1) %}
             {% if previousPage %}
-                <li  class="previous"><a class="btn btn-inverse" data-page="{{ previousPage }}" href="#">{{ 'Previous' | trans }}&nbsp;<i class="icon-arrow-left"></i></a></li>
+                <li class="previous"><a class="btn btn-inverse" data-page="{{ previousPage }}"
+                                        href="#">{{ 'Previous' | trans }}&nbsp;<i class="fa fa-arrow-left"
+                                                                                  aria-hidden="true"></i></a></li>
             {% endif %}
             {% if nextPage %}
-                <li class="next"><a class="btn btn-inverse" data-page="{{ nextPage }}" href="#"><i class="icon-arrow-right"></i>&nbsp;{{ 'Next' | trans }}</a></li>
+                <li class="next"><a class="btn btn-inverse" data-page="{{ nextPage }}" href="#"><i
+                                class="fa fa-arrow-right" aria-hidden="true"></i>&nbsp;{{ 'Next' | trans }}</a></li>
             {% endif %}
         </ul>
     </div>
@@ -198,10 +202,13 @@
             {% set previousPage = page < 2 ? false : (page - 1) %}
             {% set nextPage = page >= (totalProcessed / perPage)|ceil ? false : (page + 1) %}
             {% if previousPage %}
-                <li  class="previous"><a class="btn btn-inverse" data-page="{{ previousPage }}" href="#">{{ 'Previous' | trans }}&nbsp;<i class="icon-arrow-left"></i></a></li>
+                <li class="previous"><a class="btn btn-inverse" data-page="{{ previousPage }}"
+                                        href="#">{{ 'Previous' | trans }}&nbsp;<i class="fa fa-arrow-left"
+                                                                                  aria-hidden="true"></i></a></li>
             {% endif %}
             {% if nextPage %}
-                <li class="next"><a class="btn btn-inverse" data-page="{{ nextPage }}" href="#"><i class="icon-arrow-right"></i>&nbsp;{{ 'Next' | trans }}</a></li>
+                <li class="next"><a class="btn btn-inverse" data-page="{{ nextPage }}" href="#"><i
+                                class="fa fa-arrow-right" aria-hidden="true"></i>&nbsp;{{ 'Next' | trans }}</a></li>
             {% endif %}
         </ul>
     </div>

templates/web/prod/orders/order_item.html.twig

@@ -5,7 +5,8 @@
     <div class="alert">
         {{ 'Il se peux que vous ne voyez pas tous les elements. Vous ne verrez que les  elements correspondants aux collections sur lesquelles vous gerez les commandes' | trans }}
     </div>
-    <button class="order_launcher btn rightside"><i class="icon-chevron-left"></i>{{ 'Retour aux commandes' | trans }}</button>
+    <button class="order_launcher btn rightside"><i class="fa fa-chevron-left"
+                                                    aria-hidden="true"></i>{{ 'Retour aux commandes' | trans }}</button>
 </div>
 
 <div style="display:none;position:relative;" id="basket-window" >
@@ -88,9 +89,9 @@
                 <td colspan="2">
                     <span class="text_block">{{ displayName }} (<a
                                 style="font-size: 12px;color: #4990E2;" href="#" id="email-btn">{{ order.getUser().getEmail() }}</a>)
-                        <span class="icon-stack infoTips" id="userInfo">
+                        <span class="fa-stack infoTips" id="userInfo">
-                            <i class="icon-circle icon-stack-base" style="color:#737373"></i>
+                            <i class="fa fa-circle fa-stack-2x" aria-hidden="true" style="color:#737373"></i>
-                            <i class="icon-info" style="color:#FFF"></i>
+                            <i class="fa fa-info fa-stack-1x" style="color:#FFF" aria-hidden="true"></i>
                         </span>
                     </span>
                 </td>
@@ -102,7 +103,9 @@
                 </td>
             </tr>
         </table>
-        <button class="btn validate outline" disabled><i class="icon-ok-circle"></i>{{ 'order-manager::order-item: validate' |trans }}</button>
+        <button class="btn validate outline" disabled><i class="fa fa-check-circle-o"
+                                                         aria-hidden="true"></i>{{ 'order-manager::order-item: validate' |trans }}
+        </button>
         <div class="order-list-container">
             <div class="order_list" style="width:40%;float:left">
                 <div class="top-bar">
@@ -176,9 +179,13 @@
             <div id="order_detail" style="width:60%;">
                 <div class="external-order-action" id="order-action" style="display:none; margin: 0 0 1.2em 30px;">
                     <span class="action-text">{{ 'order-manager::order-item: refused-previously' | trans }}</span>
-                    <button class="btn deny outline"><i class="icon-remove"></i>{{ 'Deny' | trans }}</button>
+                    <button class="btn deny outline"><i class="fa fa-times" aria-hidden="true"></i>{{ 'Deny' | trans }}
-                    <button class="btn btn-primary send outline"><i class="icon-ok"></i>{{ 'Send' | trans }}</button>
+                    </button>
-                    <button class="btn reset outline"><i class="icon-refresh"></i>{{ 'order-manager::order-item: reset' | trans }}</button>
+                    <button class="btn btn-primary send outline"><i class="fa fa-check"
+                                                                    aria-hidden="true"></i>{{ 'Send' | trans }}</button>
+                    <button class="btn reset outline"><i class="fa fa-refresh"
+                                                         aria-hidden="true"></i>{{ 'order-manager::order-item: reset' | trans }}
+                    </button>
                     <img src="/assets/common/images/icons/loader000000.gif" class="activity_indicator" style="display:none;"/>
                     <input name="order_id" type="hidden" value="{{ order.getId() }}" />
                 </div>
@@ -187,9 +194,9 @@
                         {% include 'common/preview.html.twig' with {'record': order.getElements()[0].getRecord(app)}%}
                     </div>
                     <div id="info-header">
-                        <span class="icon-stack infoTips">
+                        <span class="fa-stack infoTips">
-                            <i class="icon-circle icon-stack-base" style="color:#4990E2"></i>
+                            <i class="fa fa-circle" aria-hidden="true" style="color:#4990E2"></i>
-                            <i class="icon-info" style="color:#FFF"></i>
+                            <i class="fa fa-info" aria-hidden="true" style="color:#FFF"></i>
                         </span>
                         <span class="info-text">{{ 'order-manager::order-item: information' | trans }}</span>
                     </div>
@@ -207,9 +214,14 @@
                         <div id="text-content"></div>
                     </div>
                     <div id="order-action" style="color:#333;">
-                        <button class="btn deny outline"><i class="icon-remove"></i>{{ 'Deny' | trans }}</button>
+                        <button class="btn deny outline"><i class="fa fa-times"
-                        <button class="btn btn-primary send outline"><i class="icon-ok"></i>{{ 'Send' | trans }}</button>
+                                                            aria-hidden="true"></i>{{ 'Deny' | trans }}</button>
-                        <button class="btn reset outline"><i class="icon-refresh"></i>{{ 'order-manager::order-item: reset' | trans }}</button>
+                        <button class="btn btn-primary send outline"><i class="fa fa-check"
+                                                                        aria-hidden="true"></i>{{ 'Send' | trans }}
+                        </button>
+                        <button class="btn reset outline"><i class="fa fa-refresh"
+                                                             aria-hidden="true"></i>{{ 'order-manager::order-item: reset' | trans }}
+                        </button>
                         <img src="/assets/common/images/icons/loader000000.gif" class="activity_indicator" style="display:none;"/>
                         <input name="order_id" type="hidden" value="{{ order.getId() }}" />
                     </div>

templates/web/prod/preview/basket_train.html.twig

@@ -51,10 +51,10 @@
    <div class="cont_infos">
      <div>
          <button class="preview-navigate-action" data-direction="backward">
-             <i class="icon-caret-left"></i>
+             <i class="fa fa-caret-left" aria-hidden="true"></i>
          </button>
          <button class="preview-navigate-action" data-direction="forward">
-             <i class="icon-caret-right"></i>
+             <i class="fa fa-caret-right" aria-hidden="true"></i>
          </button><br/>
        <span onclick="startSlide()" id="start_slide">{{ 'preview:: demarrer le diaporama' | trans }}</span>
        <span onclick="stopSlide()" id="stop_slide">{{ 'preview:: arreter le diaporama' | trans }}</span>

templates/web/prod/preview/feed_train.html.twig

@@ -49,10 +49,10 @@
    <div class="cont_infos">
      <div>
          <button class="preview-navigate-action" data-direction="backward">
-             <i class="icon-caret-left"></i>
+             <i class="fa fa-caret-left" aria-hidden="true"></i>
          </button>
          <button class="preview-navigate-action" data-direction="forward">
-             <i class="icon-caret-right"></i>
+             <i class="fa fa-caret-right" aria-hidden="true"></i>
          </button><br/>
          <span onclick="startSlide()" id="start_slide">{{ 'preview:: demarrer le diaporama' | trans }}</span>
          <span onclick="stopSlide()" id="stop_slide">{{ 'preview:: arreter le diaporama' | trans }}</span>

templates/web/prod/preview/reg_train.html.twig

@@ -85,10 +85,10 @@
         <div class="cont_infos">
             <div>
                 <button class="preview-navigate-action" data-direction="backward">
-                    <i class="icon-caret-left"></i>
+                    <i class="fa fa-caret-left" aria-hidden="true"></i>
                 </button>
                 <button class="preview-navigate-action" data-direction="forward">
-                    <i class="icon-caret-right"></i>
+                    <i class="fa fa-caret-right" aria-hidden="true"></i>
                 </button><br/>
                 <span onclick="startSlide()" id="start_slide">{{ 'preview:: demarrer le diaporama' | trans }}</span>
                 <span onclick="stopSlide()" id="stop_slide">{{ 'preview:: arreter le diaporama' | trans }}</span>

templates/web/prod/preview/result_train.html.twig

@@ -45,10 +45,10 @@
     <div class="cont_infos">
         <div>
             <button class="preview-navigate-action" data-direction="backward">
-                <i class="icon-caret-left"></i>
+                <i class="fa fa-caret-left" aria-hidden="true"></i>
             </button>
             <button class="preview-navigate-action" data-direction="forward">
-                <i class="icon-caret-right"></i>
+                <i class="fa fa-caret-right" aria-hidden="true"></i>
             </button><br/>
             <span onclick="startSlide()" id="start_slide">{{ 'preview:: demarrer le diaporama' | trans }} </span>
             <span onclick="stopSlide()" id="stop_slide"> {{ 'preview:: arreter le diaporama' | trans }} </span>

templates/web/prod/preview/result_train_options.html.twig

@@ -2,12 +2,12 @@
 <div id="PREVIEWCURRENTCONT" class="PNB10">
     <div style="margin:2px 0;" class="cont_infos">
         <button class="preview-navigate-action" data-direction="backward">
-            <i class="icon-caret-left"></i>
+            <i class="fa fa-caret-left" aria-hidden="true"></i>
         </button>
         <span onclick="startSlide()" id="start_slide">{{ 'preview:: demarrer le diaporama' | trans }}</span>
         <span onclick="stopSlide()" id="stop_slide">{{ 'preview:: arreter le diaporama' | trans }}</span>
         <button class="preview-navigate-action" data-direction="forward">
-            <i class="icon-caret-right"></i>
+            <i class="fa fa-caret-right" aria-hidden="true"></i>
         </button><br/>
     </div>
 </div>

templates/web/prod/results/record.html.twig

@@ -77,31 +77,34 @@
 
                         {% if settings.rollover_thumbnail == 'caption' %}
                             {% if record_subdef_url(record, 'preview') is not null and has_access_subdef(record, 'preview') %}
-                                <span class="icon-stack previewTips" tooltipsrc="{{ path('prod_tooltip_preview', { 'sbas_id' : record.databoxId, 'record_id' : record.recordId }) }}">
+                                <span class="fa-stack fa-lg previewTips"
-                                  <i class="icon-circle icon-stack-base"></i>
+                                      tooltipsrc="{{ path('prod_tooltip_preview', { 'sbas_id' : record.databoxId, 'record_id' : record.recordId }) }}">
-                                  <i class="icon-search icon-light"></i>
+                                  <i class="fa fa-circle fa-stack-2x" aria-hidden="true"></i>
+                                  <i class="fa fa-search fa-stack-1x fa-inverse" aria-hidden="true"></i>
                                 </span>
                             {% endif %}
                         {% endif %}
                         {% if settings.rollover_thumbnail == 'preview' %}
-                            <span class="icon-stack captionRolloverTips" tooltipsrc="{{ path('prod_tooltip_caption', { 'sbas_id' : record.databoxId, 'record_id' : record.recordId, 'context' : 'answer', 'number' : record.position|default(0) }) }}">
+                            <span class="fa-stack fa-lg captionRolloverTips"
-                              <i class="icon-circle icon-stack-base"></i>
+                                  tooltipsrc="{{ path('prod_tooltip_caption', { 'sbas_id' : record.databoxId, 'record_id' : record.recordId, 'context' : 'answer', 'number' : record.position|default(0) }) }}">
-                              <i class="icon-list icon-light"></i>
+                              <i class="fa fa-circle fa-stack-2x" aria-hidden="true"></i>
+                              <i class="fa fa-list fa-stack-1x fa-inverse" aria-hidden="true"></i>
                             </span>
                         {% endif %}
 
                         {% if settings.technical_display == '1' %}
-                            <span class="icon-stack infoTips" tooltipsrc="{{ path('prod_tooltip_technical_data', { 'sbas_id' : record.databoxId, 'record_id' : record.recordId }) }}">
+                            <span class="fa-stack infoTips"
-                              <i class="icon-circle icon-stack-base"></i>
+                                  tooltipsrc="{{ path('prod_tooltip_technical_data', { 'sbas_id' : record.databoxId, 'record_id' : record.recordId }) }}">
-                              <i class="icon-info icon-light"></i>
+                              <i class="fa fa-circle fa-stack-2x" aria-hidden="true"></i>
+                              <i class="fa fa-info fa-stack-1x fa-inverse" aria-hidden="true"></i>
                             </span>
                         {% endif %}
 
                         {%  if settings.show_context_menu %}
-                        <span class="icon-stack contextMenuTrigger"  id="contextTrigger_{{record.id}}"
+                            <span class="fa-stack contextMenuTrigger" id="contextTrigger_{{ record.id }}"
-                              tooltipsrc="{{ path('prod_tooltip_technical_data', { 'sbas_id' : record.databoxId, 'record_id' : record.recordId }) }}">
+                                  tooltipsrc="{{ path('prod_tooltip_technical_data', { 'sbas_id' : record.databoxId, 'record_id' : record.recordId }) }}">
-                              <i class="icon-circle icon-stack-base"></i>
+                              <i class="fa fa-circle fa-stack-2x" aria-hidden="true"></i>
-                              <i class="icon-ellipsis-horizontal icon-light"></i>
+                              <i class="fa fa-ellipsis-h fa-stack-1x fa-inverse" aria-hidden="true"></i>
                         </span>
                         <table cellspacing="0" cellpadding="0" style="display:none;" id="answerContext_{{record.id}}" class="contextMenu answercontextmenu">
                             <tbody>

templates/web/prod/tab_headers.html.twig

@@ -1,5 +1,5 @@
 {% block tab_headers_wrapper %}
-    <ul class="icon-menu ui-tabs-nav ui-helper-reset">
+    <ul class="prod-icon-menu ui-tabs-nav ui-helper-reset">
         {% block tab_headers %}
             {% if GV_thesaurus %}
                 <li class="proposals_WZ">

templates/web/prod/tab_thesaurus.html.twig

@@ -22,11 +22,11 @@
                         <div class="input-append">
                             <input type="text" name="search_value" class="input-medium thesaurus-filter-suggest-action"/>
                             <button type="submit" class="th_ok btn btn-inverse">
-                                <i class="icon-search"></i>
+                                <i class="fa fa-search" aria-hidden="true"></i>
                             </button>
 
                             <button type="button" class="th_cancel btn btn-inverse thesaurus-cancel-wizard-action">
-                                <i class="icon-undo"></i>
+                                <i class="fa fa-undo" aria-hidden="true"></i>
                             </button>
                             <input type="button" class="th_clear"/>
                         </div>

templates/web/prod/templates/push.html.twig

@@ -164,7 +164,7 @@
         </div>
         <div class="control-group info">
             <span class="help-inline" style="font-style: italic">
-                <i class="icon-info-sign"></i>
+                <i class="fa fa-info-circle" aria-hidden="true"></i>
                 {% trans %}
                     The parameter "force authentication" forces the recipient(s) of the push to possess a Phraseanet account
                     to see its contents.

templates/web/report/report_layout_child.html.twig

@@ -9,20 +9,20 @@
                         <form id="dashboard-form" class="form-inline" method="GET" action="{{ path("report_dashboard") }}">
                             <label for="dminDash" style="color:#eee">{{ "from"|trans|title }}</label>
                             <div class="input-prepend">
-                                <span class="add-on"><i class="icon icon-calendar"></i></span>
+                                <span class="add-on"><i class="icon fa fa-calendar" aria-hidden="true"></i></span>
                                 <input id="dminDash" name="dmin" style="font-size: 14px;width:220px;" size="10" type="text" placeholder="{{ "from"|trans }}" value="{{ "-1 month"|date("Y-m-d") }}">
                             </div>
                             <label for="dmaxDash" style="color:#eee">{{ "to"|trans|title }}</label>
                             <div class="input-prepend">
                                 to
-                                <span class="add-on"><i class="icon icon-calendar"></i></span>
+                                <span class="add-on"><i class="icon fa fa-calendar" aria-hidden="true"></i></span>
                                 <input id="dmaxDash" name="dmax" style="font-size: 14px;width:220px;" size="10" type="text" placeholder="{{ "to"|trans }}" value="{{ "now"|date("Y-m-d") }}">
                             </div>
                             <button class="btn submit-dashboard" type="button">{{ "Generate" | trans }}</button>
                         </form>
                         <div>
                             <span class="text-info" style="font-style: italic">
-                                <i class="icon icon-warning-sign"></i>
+                                <i class="icon fa fa-exclamation-triangle" aria-hidden="true"></i>
                                 {{
                                     "Report generation may take a long time to generate, depending on the number of collections and the period selected." | trans
                                 }}

www/scripts/tests/admin.html

@@ -3,12 +3,12 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <title>Mocha Spec Runner</title>
-    <link rel="stylesheet" href="../../bower_components/mocha/mocha.css">
+    <link rel="stylesheet" href="../../../node_modules/mocha/mocha.css">
 </head>
 <body>
     <div id="mocha"></div>
-    <script src="../../bower_components/mocha/mocha.js"></script>
+    <script src="../../../node_modules/mocha/mocha.js"></script>
-    <script src="../../bower_components/sinonjs/sinon.js"></script>
+    <script src="../../../node_modules/sinon/lib/sinon.js"></script>
     <script src="../../assets/vendors/requirejs/require.js"></script>
     <script src="common.js"></script>
     <script type="text/javascript">

www/scripts/tests/common.js

@@ -1,15 +1,15 @@
 require.config({
     baseUrl: "../../scripts",
     paths: {
-        "chai"    : "../bower_components/chai/chai",
+        "chai": "../../node_modules/chai/lib/chai",
-        "fixtures": "../bower_components/js-fixtures/fixtures",
+        "fixtures": "../../node_modules/js-fixtures/fixtures",
         jquery: "../assets/vendors/jquery/jquery.min",
         underscore: "../assets/vendors/underscore/underscore.min",
         backbone: "../assets/vendors/backbone/backbone.min",
         i18n: "../assets/vendors/i18next/i18next.min",
         bootstrap: "../assets/vendors/bootstrap/js/bootstrap.min",
-        "sinonchai": "../bower_components/sinon-chai/lib/sinon-chai",
+        "sinonchai": "../../node_modules/sinon-chai/lib/sinon-chai",
-        "squire": "../bower_components/squire/src/Squire",
+        "squire": "../../node_modules/squirejs/src/Squire",
         "jquery.ui": "../assets/vendors/jquery-ui/jquery-ui.min",
         "jquery.ui.widget": "../assets/vendors/jquery-file-upload/jquery.ui.widget.min",
         "jquery.cookie": "../assets/vendors/jquery.cookie/jquery.cookie.min",

www/scripts/tests/login.html

@@ -3,12 +3,12 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <title>Mocha Spec Runner</title>
-    <link rel="stylesheet" href="../../bower_components/mocha/mocha.css">
+    <link rel="stylesheet" href="../../../node_modules/mocha/mocha.css">
 </head>
 <body>
     <div id="mocha"></div>
-    <script src="../../bower_components/mocha/mocha.js"></script>
+    <script src="../../../node_modules/mocha/mocha.js"></script>
-    <script src="../../bower_components/sinonjs/sinon.js"></script>
+    <script src="../../../node_modules/sinon/lib/sinon.js"></script>
     <script src="../../assets/vendors/requirejs/require.js"></script>
     <script src="common.js"></script>
     <script>

www/scripts/tests/model.html

@@ -3,12 +3,12 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <title>Mocha Spec Runner</title>
-    <link rel="stylesheet" href="../../bower_components/mocha/mocha.css">
+    <link rel="stylesheet" href="../../../node_modules/mocha/mocha.css">
 </head>
 <body>
     <div id="mocha"></div>
-    <script src="../../bower_components/mocha/mocha.js"></script>
+    <script src="../../../node_modules/mocha/mocha.js"></script>
-    <script src="../../bower_components/sinonjs/sinon.js"></script>
+    <script src="../../../node_modules/sinon/lib/sinon.js"></script>
     <script src="../../assets/vendors/requirejs/require.js"></script>
     <script src="common.js"></script>
     <script>

www/scripts/tests/validator.html

@@ -3,12 +3,12 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <title>Mocha Spec Runner</title>
-    <link rel="stylesheet" href="../../bower_components/mocha/mocha.css">
+    <link rel="stylesheet" href="../../../node_modules/mocha/mocha.css">
 </head>
 <body>
     <div id="mocha"></div>
-    <script src="../../bower_components/mocha/mocha.js"></script>
+    <script src="../../../node_modules/mocha/mocha.js"></script>
-    <script src="../../bower_components/sinonjs/sinon.js"></script>
+    <script src="../../../node_modules/sinon/lib/sinon.js"></script>
     <script src="../../assets/vendors/requirejs/require.js"></script>
     <script src="common.js"></script>
     <script>