SVG ICONS AND NAV MENU

Be sure your league is setup properly before installing any scripts.Setup Video

HTML - CSSPlace in header message

<!- CSS STYLE FOR IMAGE ICON BAR ->
<style>
/*IMAGE ICONS LINKS COLORING*/
.svg-iconlink:active,.svg-iconlink:link,.svg-iconlink:visited{color:#ccc;text-shadow:2px 2px 5px #000;}
.svg-iconlink:active:hover,.svg-iconlink:link:hover,.svg-iconlink:visited:hover{color:#da3636}
.svg-icon{fill:#e63143;color:#ddd;-webkit-filter:drop-shadow(2px 2px 5px #000);filter:drop-shadow(2px 2px 5px #000)} 
.svg-icon:hover,.svg-iconlink:hover .svg-icon{fill:#ddd;color:#e63143}

/*IMAGE ICONS LINKS FORMATTING*/
.icon-bar{white-space:nowrap;vertical-align:middle;}
.svg-iconlink{display:inline-block;text-decoration:none;margin-right:8px;text-align:center}
.svg-iconlink:last-of-type{margin-right:0}
.svg-icon{width:48px;height:48px;}
.svg-icon:hover,.svg-iconlink:hover .svg-icon{cursor:pointer}
.svg-text{text-align:center;padding:5px;text-transform:uppercase;font-size:11px}

/*CSS FOR ICON BAR*/
.bannerlinkicons{text-align:center;overflow:auto;-webkit-overflow-scrolling:touch}

@media only screen and (max-width:38.000em){
.svg-icon{width:36px;height:36px;}
}
</style>

<!- ICON BAR EXAMPLE HTML ->

<div class="bannerlinkicons">
  <div class="icon-bar">
    <a class="svg-iconlink" href="INSERT URL">
      <svg class="svg-icon icon-lineup" viewBox="0 0 126.32 122.5">
        <use xlink:href="#icon-lineup-v2"></use>
      </svg>
      <div class="svg-text">Submit Lineup</div>
    </a>
    <a class="svg-iconlink" href="INSERT URL">
      <svg class="svg-icon icon-adddrop" viewBox="0 0 224.23 208.32">
        <use xlink:href="#icon-adddrop"></use>
      </svg>
      <div class="svg-text">Add/Drop</div>
    </a>
    <a class="svg-iconlink" href="INSERT URL">
      <svg class="svg-icon icon-trade" viewBox="0 0 234.61 242.39">
        <use xlink:href="#icon-trade"></use>
      </svg>
      <div class="svg-text">Trades</div>
    </a>
    <a class="svg-iconlink" href="INSERT URL">
      <svg class="svg-icon icon-roster" viewBox="0 0 129.66 125.25">
        <use xlink:href="#icon-roster-v2"></use>
      </svg>
      <div class="svg-text">Roster</div>
    </a>
    <a class="svg-iconlink" href="INSERT URL">
      <svg class="svg-icon icon-scoreboard" viewBox="0 0 254.49 236.32">
        <use xlink:href="#icon-scoreboard-v2" />
      </svg>
      <div class="svg-text">Scoreboard</div>
    </a>
    <a class="svg-iconlink" href="INSERT URL">
      <svg class="svg-icon icon-calendar" viewBox="0 0 156 172.38">
        <use xlink:href="#icon-calendar"></use>
      </svg>
      <div class="svg-text">Calendar</div>
    </a>
    <a class="svg-iconlink" href="INSERT URL">
      <svg class="svg-icon icon-history" viewBox="0 0 100 87">
        <use xlink:href="#icon-history"></use>
      </svg>
      <div class="svg-text">History</div>
    </a>
    <a class="svg-iconlink" href="INSERT URL">
      <svg class="svg-icon icon-rules" viewBox="0 0 135.12 194.78">
        <use xlink:href="#icon-rules"></use>
      </svg>
      <div class="svg-text">Rules</div>
    </a>
  </div>
</div>
Example output for nav menu
Submit Lineup
Add/Drop
Trades
Roster
Scoreboard
Calendar
History
Rules

JavascriptPlace in header message

<script>
    ;( function( window, document )
{
    'use strict'; 
    var file     = 'https://www.mflscripts.com/mfl-svg/images/sprites.svg',
        revision = 1; 
    if( !document.createElementNS || !document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' ).createSVGRect )
        return true; 
    var isLocalStorage = 'localStorage' in window && window[ 'localStorage' ] !== null,
        request,
        data,
        insertIT = function()
        {
            document.body.insertAdjacentHTML( 'afterbegin', data );
        },
        insert = function()
        {
            if( document.body ) insertIT();
            else document.addEventListener( 'DOMContentLoaded', insertIT );
        };
 
    if( isLocalStorage && localStorage.getItem( 'inlineSVGrev' ) == revision )
    {
        data = localStorage.getItem( 'inlineSVGdata' );
        if( data )
        {
            insert();
            return true;
        }
    } 
    try
    {
        request = new XMLHttpRequest();
        request.open( 'GET', file, true );
        request.onload = function()
        {
            if( request.status >= 200 && request.status < 400 )
            {
                data = request.responseText;
                insert();
                if( isLocalStorage )
                {
                    localStorage.setItem( 'inlineSVGdata',  data );
                    localStorage.setItem( 'inlineSVGrev',   revision );
                }
            }
        }
        request.send();
    }
    catch( e ){} 
}( window, document ) );
    </script>

ICON HTML

Substitute any icon in original html with ones below.
Scoreboard
 
<a class="svg-iconlink" href="INSERT URL">
  <svg class="svg-icon icon-scoreboard" viewBox="0 0 204.42 214.31">
   <use xlink:href="#icon-scoreboard" />
  </svg>
  <div class="svg-text">Scoreboard</div>
</a>
Scoreboard
 
<a class="svg-iconlink" href="INSERT URL">
  <svg class="svg-icon icon-scoreboard" viewBox="0 0 254.49 236.32">
   <use xlink:href="#icon-scoreboard-v2" />
  </svg>
  <div class="svg-text">Scoreboard</div>
</a>
Scoreboard
 
<a class="svg-iconlink" href="INSERT URL">
  <svg class="svg-icon icon-scoreboard" viewBox="0 0 512 512">
   <use xlink:href="#icon-scoreboard-v3" />
  </svg>
  <div class="svg-text">Scoreboard</div>
</a>
Submit Lineup
 
<a class="svg-iconlink" href="INSERT URL">
  <svg class="svg-icon icon-lineup" viewBox="0 0 163.01 132.41">
   <use xlink:href="#icon-lineup"></use>
  </svg>
  <div class="svg-text">Submit Lineup</div>
</a>
Submit Lineup
 
<a class="svg-iconlink" href="INSERT URL">
  <svg class="svg-icon icon-lineup" viewBox="0 0 126.32 122.5">
   <use xlink:href="#icon-lineup-v2"></use>
  </svg>
  <div class="svg-text">Submit Lineup</div>
</a>
Locker Room
 
<a class="svg-iconlink" href="INSERT URL">
  <svg class="svg-icon icon-locker" viewBox="0 0 65.33 72.67">
   <use xlink:href="#icon-locker"></use>
  </svg>
  <div class="svg-text">Locker Room</div>
</a>
Helmet
 
<a class="svg-iconlink" href="INSERT URL">
  <svg class="svg-icon icon-helmet" viewBox="0 0 74.38 67.51">
   <use xlink:href="#icon-helmet"></use>
  </svg>
  <div class="svg-text">Helmet</div>
</a>
Helmet
 
<a class="svg-iconlink" href="INSERT URL">
  <svg class="svg-icon icon-helmet" viewBox="0 0 92.46 78.65">
   <use xlink:href="#icon-helmet-v2"></use>
  </svg>
  <div class="svg-text">Helmet</div>
</a>
Stadium
 
<a class="svg-iconlink" href="INSERT URL">
  <svg class="svg-icon icon-stadium" viewBox="0 0 76.76 52.31">
   <use xlink:href="#icon-stadium"></use>
  </svg>
  <div class="svg-text">Stadium</div>
</a>
Football
 
<a class="svg-iconlink" href="INSERT URL">
  <svg class="svg-icon icon-football" viewBox="0 0 70.28 70.28">
   <use xlink:href="#icon-football"></use>
  </svg>
  <div class="svg-text">Football</div>
</a>
Football
 
<a class="svg-iconlink" href="INSERT URL">
  <svg class="svg-icon icon-football" viewBox="0 0 68.96 68.96">
   <use xlink:href="#icon-football-v2"></use>
  </svg>
  <div class="svg-text">Football</div>
</a>
Yard Marker
 
<a class="svg-iconlink" href="INSERT URL">
  <svg class="svg-icon icon-yardmarker" viewBox="0 0 93.42 122.48">
   <use xlink:href="#icon-yardmarker"></use>
  </svg>
  <div class="svg-text">Yard Marker</div>
</a>
Standings
 
<a class="svg-iconlink" href="INSERT URL">
  <svg class="svg-icon icon-standings" viewBox="0 0 70.15 75.17">
   <use xlink:href="#icon-standings"></use>
  </svg>
  <div class="svg-text">Standings</div>
</a>
Standings
 
<a class="svg-iconlink" href="INSERT URL">
  <svg class="svg-icon icon-standings-v2" viewBox="0 0 85.3 158.94">
   <use xlink:href="#icon-standings-v2"></use>
  </svg>
  <div class="svg-text">Standings</div>
</a>
Roster
 
<a class="svg-iconlink" href="INSERT URL">
  <svg class="svg-icon icon-roster" viewBox="0 0 92.85 82.88">
   <use xlink:href="#icon-roster"></use>
  </svg>
  <div class="svg-text">Roster</div>
</a>
Roster
 
<a class="svg-iconlink" href="INSERT URL">
  <svg class="svg-icon icon-roster" viewBox="0 0 129.66 125.25">
   <use xlink:href="#icon-roster-v2"></use>
  </svg>
  <div class="svg-text">Roster</div>
</a>
Add/Drop
 
<a class="svg-iconlink" href="INSERT URL">
  <svg class="svg-icon icon-adddrop" viewBox="0 0 224.23 208.32">
   <use xlink:href="#icon-adddrop"></use>
  </svg>
  <div class="svg-text">Add/Drop</div>
</a>
Add/Drop
 
<a class="svg-iconlink" href="INSERT URL">
  <svg class="svg-icon icon-adddrop" viewBox="0 0 100 92.9">
   <use xlink:href="#icon-adddrop-v2"></use>
  </svg>
  <div class="svg-text">Add/Drop</div>
</a>
Whistle
 
<a class="svg-iconlink" href="INSERT URL">
  <svg class="svg-icon icon-whistle" viewBox="0 0 122.4 122.5">
   <use xlink:href="#icon-whistle"></use>
  </svg>
  <div class="svg-text">Whistle</div>
</a>
Calendar
 
<a class="svg-iconlink" href="INSERT URL">
  <svg class="svg-icon icon-calendar" viewBox="0 0 156 172.38">
   <use xlink:href="#icon-calendar"></use>
  </svg>
  <div class="svg-text">Calendar</div>
</a>
Rules
 
<a class="svg-iconlink" href="INSERT URL">
  <svg class="svg-icon icon-rules" viewBox="0 0 135.12 194.78">
   <use xlink:href="#icon-rules"></use>
  </svg>
  <div class="svg-text">Rules</div>
</a>
History
 
<a class="svg-iconlink" href="INSERT URL">
  <svg class="svg-icon icon-history" viewBox="0 0 100 87">
   <use xlink:href="#icon-history"></use>
  </svg>
  <div class="svg-text">History</div>
</a>
History
 
<a class="svg-iconlink" href="INSERT URL">
  <svg class="svg-icon icon-history" viewBox="0 0 88.74 122.5">
   <use xlink:href="#icon-history-v2"></use>
  </svg>
  <div class="svg-text">History</div>
</a>
History
 
<a class="svg-iconlink" href="INSERT URL">
  <svg class="svg-icon icon-history" viewBox="0 0 74.26 100">
   <use xlink:href="#icon-history-v3"></use>
  </svg>
  <div class="svg-text">History</div>
</a>
Trades
 
<a class="svg-iconlink" href="INSERT URL">
  <svg class="svg-icon icon-trade" viewBox="0 0 234.61 242.39">
   <use xlink:href="#icon-trade"></use>
  </svg>
  <div class="svg-text">Trades</div>
</a>
Trades
 
<a class="svg-iconlink" href="INSERT URL">
  <svg class="svg-icon icon-trade" viewBox="0 0 170.37 100">
   <use xlink:href="#icon-trade-v2"></use>
  </svg>
  <div class="svg-text">Trades</div>
</a>
Message Board
 
<a class="svg-iconlink" href="INSERT URL">
  <svg class="svg-icon icon-chat" viewBox="0 0 34.42 24.6">
   <use xlink:href="#icon-chat"></use>
  </svg>
  <div class="svg-text">Message Board</div>
</a>
Chat
 
<a class="svg-iconlink" href="INSERT URL">
  <svg class="svg-icon icon-chat" viewBox="0 0 119.75 100">
   <use xlink:href="#icon-chat-v2"></use>
  </svg>
  <div class="svg-text">Chat</div>
</a>
Draft
 
<a class="svg-iconlink" href="INSERT URL">
  <svg class="svg-icon icon-draft" viewBox="0 0 103.8 100">
   <use xlink:href="#icon-draft"></use>
  </svg>
  <div class="svg-text">Draft</div>
</a>
BBID
 
<a class="svg-iconlink" href="INSERT URL">
  <svg class="svg-icon icon-bbid" viewBox="0 0 78.23 100">
   <use xlink:href="#icon-bbid"></use>
  </svg>
  <div class="svg-text">BBID</div>
</a>
BBID
 
<a class="svg-iconlink" href="INSERT URL">
  <svg class="svg-icon icon-bbid" viewBox="0 0 95.9 100">
   <use xlink:href="#icon-bbid-v2"></use>
  </svg>
  <div class="svg-text">BBID</div>
</a>
Injured Reserve
 
<a class="svg-iconlink" href="INSERT URL">
  <svg class="svg-icon icon-injured" viewBox="0 0 575.07 401.01">
   <use xlink:href="#icon-injured"></use>
  </svg>
  <div class="svg-text">Injured Reserve</div>
</a>
Taxi Squad
 
<a class="svg-iconlink" href="INSERT URL">
  <svg class="svg-icon icon-taxi" viewBox="0 0 207.99 199.66">
   <use xlink:href="#icon-taxi" />
  </svg>
  <div class="svg-text">Taxi Squad</div>
</a>
Auction
 
<a class="svg-iconlink" href="INSERT URL">
  <svg class="svg-icon icon-auction" viewBox="0 0 122.88 119.91">
   <use xlink:href="#icon-auction" />
  </svg>
  <div class="svg-text">Auction</div>
</a>
Email
 
<a class="svg-iconlink" href="INSERT URL">
  <svg class="svg-icon icon-email" viewBox="0 0 979.99 927.71">
   <use xlink:href="#icon-email" />
  </svg>
  <div class="svg-text">Email</div>
</a>