update to fa5 - no shims

index.html

@@ -29,8 +29,8 @@
 		<meta http-equiv="X-UA-Compatible" content="chrome=1">
 		<title>Remix - Solidity IDE</title>
 		<link rel="stylesheet" id="theme-link"/>
+		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
 		<link rel="stylesheet" href="assets/css/pygment_trac.css">
-		<link rel="stylesheet" href="assets/css/font-awesome.min.css">
 		<link rel="icon" type="x-icon" href="icon.png">
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 	</head>

src/app/components/vertical-icons-component.js

@@ -90,7 +90,7 @@ class VerticalIconComponent {
       let key = helper.checkSpecialChars(status.key) ? '' : status.key
       let type = helper.checkSpecialChars(status.type) ? '' : status.type
       let title = helper.checkSpecialChars(status.title) ? '' : status.title
-      el.appendChild(yo`<span title="${title}" class="fa fa-${key} ${css.status} text-${type}" aria-hidden="true"></span>`)
+      el.appendChild(yo`<span title="${title}" class="fas fa-${key} ${css.status} text-${type}" aria-hidden="true"></span>`)
 
       // el.classList = "" doesn't work on all browser use instead
       var classList = el.classList

src/app/debugger/debuggerUI/ButtonNavigator.js

@@ -46,19 +46,19 @@ ButtonNavigator.prototype.render = function () {
   var self = this
   var view = yo`<div class="${css.buttons}">
     <div class="${css.stepButtons} btn-group p-1">
-      <button id='overback' class='btn btn-primary btn-sm' title='Step over back' class='${css.navigator} ${css.stepButton} fa fa-reply' onclick=${function () { self.event.trigger('stepOverBack') }} disabled=${this.overBackDisabled} ></button>
+      <button id='overback' class='btn btn-primary btn-sm' title='Step over back' class='${css.navigator} ${css.stepButton} fas fa-reply' onclick=${function () { self.event.trigger('stepOverBack') }} disabled=${this.overBackDisabled} ></button>
-      <button id='intoback' class='btn btn-primary btn-sm' title='Step back' class='${css.navigator} ${css.stepButton} fa fa-level-up' onclick=${function () { self.event.trigger('stepIntoBack') }} disabled=${this.intoBackDisabled} ></button>
+      <button id='intoback' class='btn btn-primary btn-sm' title='Step back' class='${css.navigator} ${css.stepButton} fas fa-level-up' onclick=${function () { self.event.trigger('stepIntoBack') }} disabled=${this.intoBackDisabled} ></button>
-      <button id='intoforward' class='btn btn-primary btn-sm' title='Step into'  class='${css.navigator} ${css.stepButton} fa fa-level-down' onclick=${function () { self.event.trigger('stepIntoForward') }} disabled=${this.intoForwardDisabled} ></button>
+      <button id='intoforward' class='btn btn-primary btn-sm' title='Step into'  class='${css.navigator} ${css.stepButton} fas fa-level-down' onclick=${function () { self.event.trigger('stepIntoForward') }} disabled=${this.intoForwardDisabled} ></button>
-      <button id='overforward' class='btn btn-primary btn-sm' title='Step over forward' class='${css.navigator} ${css.stepButton} fa fa-share' onclick=${function () { self.event.trigger('stepOverForward') }} disabled=${this.overForwardDisabled} ></button>
+      <button id='overforward' class='btn btn-primary btn-sm' title='Step over forward' class='${css.navigator} ${css.stepButton} fas fa-share' onclick=${function () { self.event.trigger('stepOverForward') }} disabled=${this.overForwardDisabled} ></button>
     </div>
 
     <div class="${css.jumpButtons} btn-group p-1">
-      <button class='btn btn-primary btn-sm'  id='jumppreviousbreakpoint' title='Jump to the previous breakpoint' class='${css.navigator} ${css.jumpButton} fa fa-step-backward' onclick=${function () { self.event.trigger('jumpPreviousBreakpoint') }} disabled=${this.jumpPreviousBreakpointDisabled} ></button>
+      <button class='btn btn-primary btn-sm'  id='jumppreviousbreakpoint' title='Jump to the previous breakpoint' class='${css.navigator} ${css.jumpButton} fas fa-step-backward' onclick=${function () { self.event.trigger('jumpPreviousBreakpoint') }} disabled=${this.jumpPreviousBreakpointDisabled} ></button>
-      <button class='btn btn-primary btn-sm' id='jumpout' title='Jump out' class='${css.navigator} ${css.jumpButton} fa fa-eject' onclick=${function () { self.event.trigger('jumpOut') }} disabled=${this.jumpOutDisabled} ></button>
+      <button class='btn btn-primary btn-sm' id='jumpout' title='Jump out' class='${css.navigator} ${css.jumpButton} fas fa-eject' onclick=${function () { self.event.trigger('jumpOut') }} disabled=${this.jumpOutDisabled} ></button>
-      <button class='btn btn-primary btn-sm' id='jumpnextbreakpoint' title='Jump to the next breakpoint' class='${css.navigator} ${css.jumpButton} fa fa-step-forward' onclick=${function () { self.event.trigger('jumpNextBreakpoint') }} disabled=${this.jumpNextBreakpointDisabled} ></button>
+      <button class='btn btn-primary btn-sm' id='jumpnextbreakpoint' title='Jump to the next breakpoint' class='${css.navigator} ${css.jumpButton} fas fa-step-forward' onclick=${function () { self.event.trigger('jumpNextBreakpoint') }} disabled=${this.jumpNextBreakpointDisabled} ></button>
     </div>
     <div id='reverted' style="display:none">
-      <button class='btn btn-danger btn-sm' id='jumptoexception' title='Jump to exception' class='${css.navigator} ${css.button} fa fa-exclamation-triangle' onclick=${function () { self.event.trigger('jumpToException') }} disabled=${this.jumpOutDisabled} >
+      <button class='btn btn-danger btn-sm' id='jumptoexception' title='Jump to exception' class='${css.navigator} ${css.button} fas fa-exclamation-triangle' onclick=${function () { self.event.trigger('jumpToException') }} disabled=${this.jumpOutDisabled} >
       </button>
       <span>State changes made during this call will be reverted.</span>
       <span id='outofgas' style="display:none">This call will run out of gas.</span>

src/app/debugger/debuggerUI/vmDebugger/DropdownPanel.js

@@ -110,13 +110,13 @@ DropdownPanel.prototype.render = function (overridestyle) {
   overridestyle === undefined ? {} : overridestyle
   var self = this
   var title = !self.displayContentOnly ? yo`<div class="${css.title} title">
-      <div class="${css.icon} fa fa-caret-right" onclick=${function () { self.toggle() }} ></div>
+      <div class="${css.icon} fas fa-caret-right" onclick=${function () { self.toggle() }} ></div>
       <div class="${css.name}" onclick=${function () { self.toggle() }} >${this.name}</div><span class="${css.nameDetail}" onclick=${function () { self.toggle() }} ></span>
-      <div onclick=${function () { self.copyClipboard() }} title='raw' class="${css.eyeButton} btn fa fa-clipboard"></div>
+      <div onclick=${function () { self.copyClipboard() }} title='raw' class="${css.eyeButton} btn fas fa-clipboard"></div>
     </div>` : yo`<div></div>`
 
   var contentNode = yo`<div class='dropdownpanel ${css.dropdownpanel}' style='display:none'>
-      <i class="${css.refresh} fa fa-refresh" aria-hidden="true"></i>
+      <i class="${css.refresh} fas fa-sync" aria-hidden="true"></i>
       <div class='dropdowncontent'>${content}</div>
       <div class='dropdownrawcontent' style='display:none'></div>
       <div class='message' style='display:none'></div>
@@ -154,11 +154,11 @@ DropdownPanel.prototype.toggle = function () {
   var caret = this.view.querySelector('.title').firstElementChild
   if (el.style.display === '') {
     el.style.display = 'none'
-    caret.className = `${css.icon} fa fa-caret-right`
+    caret.className = `${css.icon} fas fa-caret-right`
     this.event.trigger('hide', [])
   } else {
     el.style.display = ''
-    caret.className = `${css.icon} fa fa-caret-down`
+    caret.className = `${css.icon} fas fa-caret-down`
     this.event.trigger('show', [])
   }
 }
@@ -168,7 +168,7 @@ DropdownPanel.prototype.hide = function () {
   var caret = this.view.querySelector('.title').firstElementChild
   var el = this.view.querySelector('.dropdownpanel')
   el.style.display = 'none'
-  caret.className = `${css.icon} fa fa-caret-right`
+  caret.className = `${css.icon} fas fa-caret-right`
   this.event.trigger('hide', [])
 }
 
@@ -177,7 +177,7 @@ DropdownPanel.prototype.show = function () {
   var caret = this.view.querySelector('.title').firstElementChild
   var el = this.view.querySelector('.dropdownpanel')
   el.style.display = ''
-  caret.className = `${css.icon} fa fa-caret-down`
+  caret.className = `${css.icon} fas fa-caret-down`
   this.event.trigger('show', [])
 }
 

src/app/editor/contextView.js

@@ -172,10 +172,10 @@ class ContextView {
     return yo`<div class=${css.line}>
       <div title=${type} class=${css.type}>${type}</div>
       <div title=${node.attributes.name} class=${css.name}>${node.attributes.name}</div>
-      <i class="fa fa-share ${css.jump}" aria-hidden="true" onclick=${jumpTo}></i>
+      <i class="fas fa-share ${css.jump}" aria-hidden="true" onclick=${jumpTo}></i>
       <span class=${css.referencesnb}>${references}</span>
-      <i data-action='previous' class="fa fa-chevron-up ${css.jump}" aria-hidden="true" onclick=${jump}></i>
+      <i data-action='previous' class="fas fa-chevron-up ${css.jump}" aria-hidden="true" onclick=${jump}></i>
-      <i data-action='next' class="fa fa-chevron-down ${css.jump}" aria-hidden="true" onclick=${jump}></i>
+      <i data-action='next' class="fas fa-chevron-down ${css.jump}" aria-hidden="true" onclick=${jump}></i>
         ${showGasEstimation()}
     </div>`
   }

src/app/execution/confirmDialog.js

@@ -40,7 +40,7 @@ function confirmDialog (tx, amount, gasEstimation, self, newGasPriceCb, initialP
     </div>
     <div class=${css.checkbox}>
       <input id='confirmsetting' type="checkbox">
-      <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Do not ask for confirmation again. (the setting will not be persisted for the next page reload)
+      <i class="fas fa-exclamation-triangle" aria-hidden="true"></i> Do not ask for confirmation again. (the setting will not be persisted for the next page reload)
     </div>
   </div>
   `

src/app/execution/txLogger.js

@@ -233,7 +233,7 @@ function renderKnownTransaction (self, data) {
         <div class=${css.buttons}>
           <button class="${css.debug} btn btn-primary btn-sm" onclick=${(e) => debug(e, data, self)}>Debug</div>
         </div>
-        <i class="${css.arrow} fa fa-angle-down"></i>
+        <i class="${css.arrow} fas fa-angle-down"></i>
       </div>
     </span>
   `
@@ -259,7 +259,7 @@ function renderCall (self, data) {
         <div class=${css.buttons}>
           <div class=${css.debug} onclick=${(e) => debug(e, data, self)}>Debug</div>
         </div>
-        <i class="${css.arrow} fa fa-angle-down"></i>
+        <i class="${css.arrow} fas fa-angle-down"></i>
       </div>
     </span>
   `
@@ -279,7 +279,7 @@ function renderUnknownTransaction (self, data) {
         <div class=${css.buttons}>
           <div class=${css.debug} onclick=${(e) => debug(e, data, self)}>Debug</div>
         </div>
-        <i class="${css.arrow} fa fa-angle-down"></i>
+        <i class="${css.arrow} fas fa-angle-down"></i>
       </div>
     </span>
   `
@@ -295,14 +295,14 @@ function renderEmptyBlock (self, data) {
 
 function checkTxStatus (tx, type) {
   if (tx.status === '0x1') {
-    return yo`<i class="${css.txStatus} ${css.succeeded} fa fa-check-circle"></i>`
+    return yo`<i class="${css.txStatus} ${css.succeeded} fas fa-check-circle"></i>`
   }
   if (type === 'call' || type === 'unknownCall') {
     return yo`<i class="${css.txStatus} ${css.call}">call</i>`
   } else if (tx.status === '0x0') {
-    return yo`<i class="${css.txStatus} ${css.failed} fa fa-times-circle"></i>`
+    return yo`<i class="${css.txStatus} ${css.failed} fas fa-times-circle"></i>`
   } else {
-    return yo`<i class="${css.txStatus} ${css.notavailable} fa fa-circle-thin" title='Status not available' ></i>`
+    return yo`<i class="${css.txStatus} ${css.notavailable} fas fa-circle-thin" title='Status not available' ></i>`
   }
 }
 
@@ -369,8 +369,8 @@ function txDetails (e, tx, data, obj) {
   var to = obj.to
   var log = document.querySelector(`#${tx.id} [class^='log']`)
   var arrow = document.querySelector(`#${tx.id} [class^='arrow']`)
-  var arrowUp = yo`<i class="${css.arrow} fa fa-angle-up"></i>`
+  var arrowUp = yo`<i class="${css.arrow} fas fa-angle-up"></i>`
-  var arrowDown = yo`<i class="${css.arrow} fa fa-angle-down"></i>`
+  var arrowDown = yo`<i class="${css.arrow} fas fa-angle-down"></i>`
   if (table && table.parentNode) {
     tx.removeChild(table)
     log.removeChild(arrow)

src/app/files/file-explorer.js

@@ -28,23 +28,23 @@ function fileExplorer (localRegistry, files, menuItems) {
     [
       { action: 'createNewFile',
         title: 'Create New File in the Browser Storage Explorer',
-        icon: 'fa fa-plus-circle'
+        icon: 'fas fa-plus-circle'
       },
       { action: 'publishToGist',
         title: 'Publish all [browser] explorer files to a github gist',
-        icon: 'fa fa-github'
+        icon: 'fas fa-github'
       },
       { action: 'copyFiles',
         title: 'Copy all files to another instance of Remix IDE',
-        icon: 'fa fa-files-o'
+        icon: 'fas fa-files-o'
       },
       { action: 'uploadFile',
         title: 'Add Local file to the Browser Storage Explorer',
-        icon: 'fa fa-folder-open'
+        icon: 'fas fa-folder-open'
       },
       { action: 'updateGist',
         title: 'Update the current [gist] explorer',
-        icon: 'fa fa-github'
+        icon: 'fas fa-github'
       }
     ]
   // menu items

src/app/files/remixd-handle.js

@@ -98,7 +98,7 @@ function remixdDialog () {
       </div>
       <div class=${css.dialogParagraph}>Connection will start a session between <em>${window.location.href}</em> and your local file system <i>ws://127.0.0.1:65520</i>
         so please make sure your system is secured enough (port 65520 neither opened nor forwarded).
-        <i class="fa fa-link"></i> will show you current connection status.
+        <i class="fas fa-link"></i> will show you current connection status.
       </div>
       <div class=${css.dialogParagraph}>This feature is still in Alpha, so we recommend you to keep a copy of the shared folder.</div>
     </div>

src/app/panels/terminal.js

@@ -142,7 +142,7 @@ class Terminal extends BaseApi {
     `
     self._view.icon = yo`
       <i onmouseenter=${hover} onmouseleave=${hover} onmousedown=${minimize}
-      class="btn btn-secondary btn-sm align-items-center ${css.toggleTerminal} fa fa-angle-double-down"></i>`
+      class="btn btn-secondary btn-sm align-items-center ${css.toggleTerminal} fas fa-angle-double-down"></i>`
     self._view.dragbar = yo`
       <div onmousedown=${mousedown} class=${css.dragbarHorizontal}></div>`
     self._view.dropdown = self._components.dropdown.render()
@@ -154,7 +154,7 @@ class Terminal extends BaseApi {
         <div class="${css.menu} border-top bg-light">
           ${self._view.icon}
           <div class=${css.clear} onclick=${clear}>
-            <i class="fa fa-ban" aria-hidden="true" title="Clear console"
+            <i class="fas fa-ban" aria-hidden="true" title="Clear console"
             onmouseenter=${hover} onmouseleave=${hover}></i>
           </div>
           ${self._view.pendingTxCount}
@@ -166,7 +166,7 @@ class Terminal extends BaseApi {
           </div>
           ${self._view.dropdown}
           <div class=${css.search}>
-            <i class="fa fa-search ${css.searchIcon} bg-light" aria-hidden="true"></i>
+            <i class="fas fa-search ${css.searchIcon} bg-light" aria-hidden="true"></i>
             ${self._view.inputSearch}
           </div>
         </div>

src/app/tabs/compile-tab.js

@@ -118,7 +118,7 @@ class CompileTab extends CompilerApi {
         this.renderer.error(data['error'].formattedMessage, this._view.errorContainer, {type: data['error'].severity || 'error'})
         if (data['error'].mode === 'panic') {
           return modalDialogCustom.alert(yo`
-            <div><i class="fa fa-exclamation-circle ${css.panicError}" aria-hidden="true"></i>
+            <div><i class="fas fa-exclamation-circle ${css.panicError}" aria-hidden="true"></i>
             The compiler returned with the following internal error: <br> <b>${data['error'].formattedMessage}.<br>
             The compiler might be in a non-sane state, please be careful and do not use further compilation data to deploy to mainnet.
             It is heavily recommended to use another browser not affected by this issue (Firefox is known to not be affected).</b><br>
@@ -174,7 +174,7 @@ class CompileTab extends CompilerApi {
       </header>
       <article class="${css.compilerArticle}">
         <button class="btn btn-primary btn-block" title="Publish on Swarm" onclick="${() => { this.publish() }}">
-          <i class="${css.copyIcon} fa fa-upload" aria-hidden="true"></i>
+          <i class="${css.copyIcon} fas fa-upload" aria-hidden="true"></i>
           <span>Publish on Swarm</span>
         </button>
         <button class="btn btn-secondary btn-block" title="Display Contract Details" onclick="${() => { this.details() }}">
@@ -188,11 +188,11 @@ class CompileTab extends CompilerApi {
             </div>
             <div class="btn-group" role="group" aria-label="Copy to Clipboard">
               <button class="btn btn-secondary" title="Copy ABI to clipboard" onclick="${() => { this.copyABI() }}">
-                <i class="${css.copyIcon} fa fa-clipboard" aria-hidden="true"></i>
+                <i class="${css.copyIcon} fas fa-clipboard" aria-hidden="true"></i>
                 <span>ABI</span>
               </button>
               <button class="btn btn-secondary" title="Copy Bytecode to clipboard" onclick="${() => { this.copyBytecode() }}">
-                <i class="${css.copyIcon} fa fa-clipboard" aria-hidden="true"></i>
+                <i class="${css.copyIcon} fas fa-clipboard" aria-hidden="true"></i>
                 <span>Bytecode</span>
               </button>
             </div>
@@ -268,7 +268,7 @@ class CompileTab extends CompilerApi {
     const log = yo`<div class="${css.detailsJSON}"></div>`
     Object.keys(contractProperties).map(propertyName => {
       const copyDetails = yo`<span class="${css.copyDetails}">${copyToClipboard(() => contractProperties[propertyName])}</span>`
-      const questionMark = yo`<span class="${css.questionMark}"><i title="${help[propertyName]}" class="fa fa-question-circle" aria-hidden="true"></i></span>`
+      const questionMark = yo`<span class="${css.questionMark}"><i title="${help[propertyName]}" class="fas fa-question-circle" aria-hidden="true"></i></span>`
       log.appendChild(yo`<div class=${css.log}>
         <div class="${css.key}">${propertyName} ${copyDetails} ${questionMark}</div>
         ${this.insertValue(contractProperties, propertyName)}

src/app/tabs/compileTab/compilerContainer.js

@@ -117,8 +117,8 @@ class CompilerContainer {
       if (this._view.versionSelector) this._updateVersionSelector()
     })
 
-    this._view.warnCompilationSlow = yo`<i title="Compilation Slow" style="visibility:hidden" class="${css.warnCompilationSlow} fa fa-exclamation-triangle" aria-hidden="true"></i>`
+    this._view.warnCompilationSlow = yo`<i title="Compilation Slow" style="visibility:hidden" class="${css.warnCompilationSlow} fas fa-exclamation-triangle" aria-hidden="true"></i>`
-    this._view.compileIcon = yo`<i class="fa fa-refresh ${css.icon}" aria-hidden="true"></i>`
+    this._view.compileIcon = yo`<i class="fas fa-sync ${css.icon}" aria-hidden="true"></i>`
     this._view.autoCompile = yo`<input class="${css.autocompile}" onchange=${this.updateAutoCompile.bind(this)} id="autoCompile" type="checkbox" title="Auto compile">`
     this._view.hideWarningsBox = yo`<input class="${css.autocompile}" onchange=${this.hideWarnings.bind(this)} id="hideWarningsBox" type="checkbox" title="Hide warnings">`
     if (this.data.autoCompile) this._view.autoCompile.setAttribute('checked', '')

src/app/tabs/run-tab.js

@@ -60,7 +60,7 @@ class RunTab extends BaseApi {
       <div class=${css.instanceContainerTitle}
         title="Autogenerated generic user interfaces for interaction with deployed contracts">
         Deployed Contracts
-        <i class="${css.clearinstance} ${css.icon} fa fa-trash" onclick=${() => this.event.trigger('clearInstance', [])}
+        <i class="${css.clearinstance} ${css.icon} fas fa-trash" onclick=${() => this.event.trigger('clearInstance', [])}
           title="Clear instances list and reset recorder" aria-hidden="true">
         </i>
       </div>`

src/app/tabs/runTab/contractDropdown.js

@@ -44,8 +44,8 @@ class ContractDropdownUI {
   }
 
   render () {
-    this.compFails = yo`<i title="No contract compiled yet or compilation failed. Please check the compile tab for more information." class="fa fa-times-circle ${css.errorIcon}" ></i>`
+    this.compFails = yo`<i title="No contract compiled yet or compilation failed. Please check the compile tab for more information." class="fas fa-times-circle ${css.errorIcon}" ></i>`
-    var info = yo`<i class="fa fa-info ${css.infoDeployAction}" aria-hidden="true" title="*.sol files allows deploying and accessing contracts. *.abi files only allows accessing contracts."></i>`
+    var info = yo`<i class="fas fa-info ${css.infoDeployAction}" aria-hidden="true" title="*.sol files allows deploying and accessing contracts. *.abi files only allows accessing contracts."></i>`
 
     this.atAddressButtonInput = yo`<input class="${css.input} ${css.ataddressinput} ataddressinput form-control" placeholder="Load contract from Address" title="atAddress" />`
     this.selectContractNames = yo`<select class="${css.contractNames} custom-select" disabled></select>`

src/app/tabs/runTab/recorder.js

@@ -23,9 +23,9 @@ class RecorderUI {
       .recorder {}
     `
 
-    this.runButton = yo`<i class="fa fa-play runtransaction ${css2.runTxs} ${css.icon}"  title="Run Transactions" aria-hidden="true"></i>`
+    this.runButton = yo`<i class="fas fa-play runtransaction ${css2.runTxs} ${css.icon}"  title="Run Transactions" aria-hidden="true"></i>`
     this.recordButton = yo`
-      <i class="fa fa-floppy-o savetransaction ${css2.recorder} ${css.icon}"
+      <i class="fas fa-floppy-o savetransaction ${css2.recorder} ${css.icon}"
         onclick=${this.triggerRecordButton.bind(this)} title="Save Transactions" aria-hidden="true">
       </i>`
 

src/app/tabs/runTab/settings.js

@@ -64,7 +64,7 @@ class SettingsUI {
               value="web3" name="executionContext"> Web3 Provider
             </option>
           </select>
-          <a href="https://github.com/ethereum/EIPs/blob/master/EIPS/eip-155.md" target="_blank"><i class="${css.infoDeployAction} fa fa-info"></i></a>
+          <a href="https://github.com/ethereum/EIPs/blob/master/EIPS/eip-155.md" target="_blank"><i class="${css.infoDeployAction} fas fa-info"></i></a>
         </div>
       </div>
     `
@@ -73,12 +73,12 @@ class SettingsUI {
       <div class="${css.crow}">
         <div class="${css.col1_1}">
           Account
-          <i class="fa fa-plus-circle ${css.icon}" aria-hidden="true" onclick=${this.newAccount.bind(this)} title="Create a new account"></i>
+          <i class="fas fa-plus-circle ${css.icon}" aria-hidden="true" onclick=${this.newAccount.bind(this)} title="Create a new account"></i>
         </div>
         <div class=${css.account}>
           <select name="txorigin" class="form-control ${css.select}" id="txorigin"></select>
           ${copyToClipboard(() => document.querySelector('#runTabView #txorigin').value)}
-          <i class="fa fa-pencil-square-o ${css.icon}" aria-hiden="true" onclick=${this.signMessage.bind(this)} title="Sign a message using this account key"></i>
+          <i class="fas fa-pencil-square-o ${css.icon}" aria-hiden="true" onclick=${this.signMessage.bind(this)} title="Sign a message using this account key"></i>
         </div>
       </div>
     `
@@ -231,7 +231,7 @@ class SettingsUI {
         this.netUI.innerHTML = 'can\'t detect network '
         return
       }
-      this.netUI.innerHTML = `<i class="${css.networkItem} fa fa-plug" aria-hidden="true"></i> ${name} (${id || '-'})`
+      this.netUI.innerHTML = `<i class="${css.networkItem} fas fa-plug" aria-hidden="true"></i> ${name} (${id || '-'})`
     })
   }
 

src/app/tabs/settings-tab.js

@@ -81,7 +81,7 @@ module.exports = class SettingsTab extends BaseApi {
     Although this is very convenient, you should completely trust the backend you are connected to (Geth, Parity, ...).
     It is not recommended (and also most likely not relevant) to use this mode with an injected provider (Mist, Metamask, ...) or with JavaScript VM.
     Remix never persist any passphrase.`.split('\n').map(s => s.trim()).join(' ')
-    this._view.warnPersonalMode = yo`<i title=${warnText} class="${css.icon} fa fa-exclamation-triangle text-warning" aria-hidden="true"></i>`
+    this._view.warnPersonalMode = yo`<i title=${warnText} class="${css.icon} fas fa-exclamation-triangle text-warning" aria-hidden="true"></i>`
     this._view.generateContractMetadata = yo`<input onchange=${onchangeGenerateContractMetadata} id="generatecontractmetadata" type="checkbox" class="form-check-input">`
 
     if (this.config.get('settings/generate-contract-metadata')) this._view.generateContractMetadata.setAttribute('checked', '')

src/app/ui/TreeView.js

@@ -77,7 +77,7 @@ class TreeView {
   formatData (key, data, children, expand, keyPath) {
     var self = this
     var li = yo`<li key=${keyPath} class=${css.li_tv}></li>`
-    var caret = yo`<div class="fa fa-caret-right caret ${css.caret_tv}"></div>`
+    var caret = yo`<div class="fas fa-caret-right caret ${css.caret_tv}"></div>`
     var label = yo`
       <div key=${keyPath} class=${css.label_tv}>
         ${caret}
@@ -87,7 +87,7 @@ class TreeView {
     if (data.children) {
       var list = yo`<ul key=${keyPath} class=${css.ul_tv}>${children}</ul>`
       list.style.display = 'none'
-      caret.className = list.style.display === 'none' ? `fa fa-caret-right caret ${css.caret_tv}` : `fa fa-caret-down caret ${css.caret_tv}`
+      caret.className = list.style.display === 'none' ? `fas fa-caret-right caret ${css.caret_tv}` : `fas fa-caret-down caret ${css.caret_tv}`
       label.onclick = function () {
         self.expand(keyPath)
       }
@@ -120,7 +120,7 @@ class TreeView {
     var node = this.nodeAt(path)
     if (node) {
       node.style.display = node.style.display === 'none' ? 'block' : 'none'
-      caret.className = node.style.display === 'none' ? `fa fa-caret-right caret ${css.caret_tv}` : `fa fa-caret-down caret ${css.caret_tv}`
+      caret.className = node.style.display === 'none' ? `fas fa-caret-right caret ${css.caret_tv}` : `fas fa-caret-down caret ${css.caret_tv}`
       this.event.trigger('nodeClick', [path, node])
     }
   }

src/app/ui/card.js

@@ -16,7 +16,7 @@ module.exports = class Card {
     if (self._view.el) return self._view.el
 
     self._view.cardBody = yo`<div class=${css.cardBody}></div>`
-    self._view.arrow = yo`<i class="${css.arrow} fa fa-angle-down" onclick="${() => trigger(this)}"></i>`
+    self._view.arrow = yo`<i class="${css.arrow} fas fa-angle-down" onclick="${() => trigger(this)}"></i>`
 
     self._view.expandCollapseButton = yo`
     <div class=${css.expandCollapseButton}>${self._view.arrow}</div>`

src/app/ui/copy-to-clipboard.js

@@ -13,7 +13,7 @@ var css = csjs`
 `
 
 module.exports = function copyToClipboard (getContent, tip = 'Copy value to clipboard', icon = 'fa-clipboard') {
-  var copyIcon = yo`<i title="${tip}" class="${css.copyIcon} fa ${icon}" aria-hidden="true"></i>`
+  var copyIcon = yo`<i title="${tip}" class="${css.copyIcon} fas ${icon}" aria-hidden="true"></i>`
   copyIcon.onclick = (event) => {
     event.stopPropagation()
     var copiableContent

src/app/ui/draggableContent.js

@@ -44,9 +44,9 @@ module.exports =
       <div>
           <div class="${css.headerDraggableModal} title" title=${title}><span title="${title}" >${title}</span><span title="${url}" > - ${url}</span>
             <div class=${css.modalActions}>
-              <i onclick=${() => { this.minimize() }} class="fa fa-window-minimize ${css.modalAction}"></i>
+              <i onclick=${() => { this.minimize() }} class="fas fa-window-minimize ${css.modalAction}"></i>
-              <i onclick=${() => { this.maximise() }} class="fa fa-window-maximize ${css.modalAction}"></i>
+              <i onclick=${() => { this.maximise() }} class="fas fa-window-maximize ${css.modalAction}"></i>
-              <i onclick=${() => { this.close() }} class="fa fa-window-close-o ${css.modalAction}"></i>
+              <i onclick=${() => { this.close() }} class="fas fa-window-close-o ${css.modalAction}"></i>
             </div>
           </div>
         </div>

src/app/ui/dropdown.js

@@ -41,7 +41,7 @@ class Dropdown {
     self._view.selected = yo`
       <div class=${css.selectbox}>
         <span class=${css.selected}> [${self.data.selected.length}] ${self.data.selected.join(', ')}</span>
-        <i class="${css.icon} fa fa-caret-down"></i>
+        <i class="${css.icon} fas fa-caret-down"></i>
       </div>
     `
     self._view.el = yo`

src/app/ui/modaldialog.js

@@ -122,7 +122,7 @@ function html (opts) {
     <div class="${css['modalContent']} bg-light text-secondary ${opts.class}">
       <div class="${css['modalHeader']}">
         <h3></h3>
-        <i id="modal-close" title="Close" class="fa fa-times ${css['modalClose']}" aria-hidden="true"></i>
+        <i id="modal-close" title="Close" class="fas fa-times ${css['modalClose']}" aria-hidden="true"></i>
       </div>
       <div class="${css['modalBody']}"> -
       </div>

src/app/ui/renderer.js

@@ -89,7 +89,7 @@ Renderer.prototype.error = function (message, container, opt) {
 
   var $pre = $(opt.useSpan ? yo`<span></span>` : yo`<pre></pre>`).html(message)
 
-  var $error = $(yo`<div class="sol ${opt.type}"><div class="close"><i class="fa fa-close"></i></div></div>`).prepend($pre)
+  var $error = $(yo`<div class="sol ${opt.type}"><div class="close"><i class="fas fa-times"></i></div></div>`).prepend($pre)
   $(container).append($error)
 
   $error.click((ev) => {

src/multiParamManager.js

@@ -128,7 +128,7 @@ class MultiParamManager {
 // or do we need to only do this in 1 place - I have a feeling that this will happen in multiple places
 
     this.contractActionsContainerSingle = yo`<div class="${css.contractActionsContainerSingle}" >
-      <button onclick=${() => { onClick() }} class="${css.instanceButton} btn btn-sm">${title}</button>${this.basicInputField}<i class="fa fa-angle-down ${css.methCaret}" onclick=${() => { this.switchMethodViewOn() }} title=${title} ></i>
+      <button onclick=${() => { onClick() }} class="${css.instanceButton} btn btn-sm">${title}</button>${this.basicInputField}<i class="fas fa-angle-down ${css.methCaret}" onclick=${() => { this.switchMethodViewOn() }} title=${title} ></i>
       </div>`
 
     this.multiFields = this.createMultiFields()
@@ -148,7 +148,7 @@ class MultiParamManager {
       <div class="${css.contractActionsContainerMultiInner} text-dark" >
         <div onclick=${() => { this.switchMethodViewOff() }} class="${css.multiHeader}">
           <div class="${css.multiTitle}">${title}</div>
-          <i class='fa fa-angle-up ${css.methCaret}'></i>
+          <i class='fas fa-angle-up ${css.methCaret}'></i>
         </div>
         ${this.multiFields}
         <div class="${css.group} ${css.multiArg}" >

src/persmission-handler.js

@@ -141,7 +141,7 @@ export class PermissionHandler {
     <section class="${css.permission}">
       <article class="${css.images}">
         <img src="${from.icon}" />
-        <i class="fa fa-arrow-right"></i>
+        <i class="fas fa-arrow-right"></i>
         <img src="${to.icon}" />
       </article>
       

src/universal-dapp-ui.js

@@ -69,7 +69,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
   var shortAddress = helper.shortenAddress(address)
   var title = yo`
     <div class="${css.title} alert alert-dark">
-      <button class="btn btn-light ${css.titleExpander}" onclick="${(e) => { toggleClass(e) }}"><i class="fa fa-caret-right" aria-hidden="true"></i></button>
+      <button class="btn btn-light ${css.titleExpander}" onclick="${(e) => { toggleClass(e) }}"><i class="fas fa-caret-right" aria-hidden="true"></i></button>
       <div class="input-group ${css.nameNbuts}">
         <div class="${css.titleText} input-group-prepend"><span class="input-group-text"> ${contractName} at ${shortAddress} (${context})</span></div>
         <div class="btn-group">
@@ -78,7 +78,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
       </div>
   </div>`
 
-  var close = yo`<button class="${css.udappClose} btn btn-secondary" onclick=${remove}><i class="${css.closeIcon} fa fa-close" aria-hidden="true"></i></button>`
+  var close = yo`<button class="${css.udappClose} btn btn-secondary" onclick=${remove}><i class="${css.closeIcon} fas fa-times" aria-hidden="true"></i></button>`
   title.querySelector('.btn-group').appendChild(close)
 
   var contractActionsWrapper = yo`