MFL FOOTBALL RELATED SVG ICONS

STARTER CSS AND HTML TO CREATE AN ICON BAR

<!- 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>
Submit Lineup
Add/Drop
Trades
Roster
Scoreboard
Calendar
History
Rules

HEADER JS - ALREADY INSTALLED IN NEW DEMO GLOBALHEADER.JS FILE

<script> jQuery.get("//nitrografixx.com/SVGICONS/images/sprites.svg", function(data) { var div = document.createElement("div"); div.innerHTML = new XMLSerializer().serializeToString(data.documentElement); document.body.insertBefore(div, document.body.childNodes[0]); }); </script>

FOOTER JS - ALREADY INSTALLED IN NEW DEMO GLOBALFOOTER.JS FILE

<script> !function(e,n,t,o){o&&e.addEventListener("DOMContentLoaded",function(){[].forEach.call(e.querySelectorAll("use"),function(n){var o=n.parentNode,r=n.getAttribute("xlink:href").split("#"),a=r[0],l=r[1],s=t[a]=t[a]||new XMLHttpRequest;s.s||(s.s=[],s.open("GET",a),s.onload=function(){var n=e.createElement("x"),t=s.s;n.innerHTML=s.responseText,s.onload=function(){t.splice(0).map(function(e){var t=n.querySelector("#"+e[2]);t&&e[0].replaceChild(t.cloneNode(!0),e[1])})},s.onload()},s.send()),s.s.push([o,n,l]),s.responseText&&s.onload()})})}(document,navigator,{},/Trident\/[567]\b/.test(navigator.userAgent)); </script>

ICON HTML

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 85.71"> <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>