title: Admin LTE dashboard with React
body: <p>I am using ADMIN LTE dashboard with my React Application. I have added certain  tags in my Sidebar component along with font-awesome  icons. However when I click on the link, the font awesome icons are refreshed(it re-runs the scripts in index.html).</p>
  
  <p>Following is the code of index.html</p>
  
  <pre><code> &lt;!doctype html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
      &lt;meta name="Description" content="Admin Panel"&gt;
      &lt;link rel="stylesheet" href="css/bootstrap.min.css" /&gt;
      &lt;link rel="stylesheet" href="css/AdminLTE.css" /&gt;
      &lt;link rel="stylesheet" href="css/_all-skins.min.css" /&gt;
      &lt;link rel="stylesheet" href="css/ionicons.min.css" /&gt;
      &lt;!-- For material UI  Roboto Font--&gt;
      &lt;link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" /&gt;
      &lt;link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /&gt;
      &lt;link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic" /&gt;
      &lt;title&gt;Parcel&lt;/title&gt;
  
      &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/adminlte.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.slimscroll.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://use.fontawesome.com/581d5d54d2.js" &gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body class="hold-transition skin-blue sidebar-mini"&gt;
      &lt;div id="root" class="wrapper"&gt;&lt;/div&gt;
      &lt;noscript&gt;Make sure your Javascript is enabled&lt;/noscript&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Sidebar.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import './style.css';
  
  export default class SideBar extends Component {
      render() {
          return (
              &lt;aside className="main-sidebar"&gt;
                  &lt;section className="sidebar"&gt;
                      &lt;ul className="sidebar-menu"&gt;
                          &lt;li&gt;
                              &lt;a href="/customers"&gt;
                                  &lt;i className="fa fa-user-circle"&gt;&lt;/i&gt; &lt;span&gt;dashboard&lt;/span&gt;
                              &lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="/customers"&gt;
                                  &lt;i className="fa fa-asterisk"&gt;&lt;/i&gt; &lt;span&gt;Settings&lt;/span&gt;
                              &lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;/section&gt;
                  &lt;/aside&gt;
          )
      }
  }
  </code></pre>