Music Player - jPlayer Dynamic multi player Advanced - CUSTOM SKIN

index.html

<div class="jplayer" id="myid" data-jptitle="Charlie Puth - Attention" data-jpsrc="https://audio-ssl.itunes.apple.com/apple-assets-us-std-000001/AudioPreview122/v4/b1/eb/c1/b1ebc105-bb9b-53d8-aca6-d19497b89a54/mzaf_594361230071145654.plus.aac.p.m4a"  poster="https://img.youtube.com/vi/9vQ6X_xFSYw/hqdefault.jpg"></div>
<br>

<audio controls poster="https://img.youtube.com/vi/9vQ6X_xFSYw/hqdefault.jpg">
  <!--<source src="http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3" type="audio/mp3"> -->
  <source src="http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3" type="audio/mp3">
</audio>
<br>

<audio controls id="audioID">
  <!--<source src="http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3" type="audio/mp3"> -->
  <source src="http://live96.917xfm.de/;stream" type="audio/mp3">
</audio>
<br>

<a href="http://podcast.rickygervais.com/rickyandpepe_twitter.mp4">My MP4 Video Title</a>
<!-- <a href="http://www.jplayer.org/video/m4v/Finding_Nemo_Teaser.m4v">My M4v Video Title</a> -->
<br>

music-player-jplayer-dynamic-multi-player-advanced-custom-skin.markdown

Music Player - jPlayer Dynamic multi player Advanced - CUSTOM SKIN

CSS Flexbox HTML Audio Player with jPlayer Plugin.

A Pen by Gino on CodePen.

License.

script.js

/*
for youtube and chromecast may be destroy and recreate youtube controler when not youtube.

// DESTROY PLAYER
$("#someId").jPlayer("destroy");

// CREATE NEW PLAYER
$("#someId").jPlayer({
  // New constructor options.
});

// DONT KNOW WHAT IT DO WITH THE PLAYLIST

*/


$(document).ready(function() {

  // CHANGE STYLE IN HEADER... TOO SLOW
  // $('<style type="text/css">body audio,a[href$="mp3"],a[href$="m4v"],a[href$="mp4"] {display: none;}</style>').appendTo($('head'));

  var this_poster = '';

  $('.jplayer,audio,video,a[href$=".mp3"],a[href$=".m4v"],a[href$=".mp4"]').each(function(i) {

    var jpthis = $(this);

    // https://stackoverflow.com/questions/12249788/jquery-loop-through-html5-data-attributes
    // data object

    // data json
    //if (jpthis.attr('data-title'))  {
    if (jpthis.data('jptitle')) {

      strJson = "{"
      $.each(jpthis.data(), function(i, v) {
        strJson += '"' + i + '":"' + v + '",';

        //if(i=="jptitle")
        //var this_title = v; 

        //alert(i)
      });

      strJson = strJson.substring(0, strJson.length - 1);
      strJson += '}';
      var jsonObject = $.parseJSON(strJson);


      for (var key in jsonObject)
      //alert(key + " : " + jsonObject[key]);


        if (typeof jsonObject.jptitle != "undefined")
          var this_title = jsonObject.jptitle; //alert(jsonObject.jptitle);

      if (typeof jsonObject.jpsrc != "undefined")
        var this_src = jsonObject.jpsrc; //alert(jsonObject.jptitle);

      if (typeof jsonObject.jpplaylist != "undefined")
        var this_src = jsonObject.jpplaylist; //alert(jsonObject.jptitle);

      console.log(this_title);

      //console.log(strJson);
      //console.log(jsonObject);

    }

    /////////////////////

    //console.log(strJson);
    //console.log(jsonObject);

    if (jpthis.is('a[href$="mp3"]') || jpthis.is('a[href$="m4v"]') || jpthis.is('a[href$="mp4"]')) {
      var this_src = jpthis.attr('href');
      var this_title = jpthis.text();
    } else {

      if (jpthis.is('audio') || jpthis.is('video'))
        var this_src = jpthis.find('source').attr('src');

      //if(!title)



      //alert(this_title);

    }

    if (typeof this_src != "undefined" && !this_title) {

      //var this_title = this_src.substring(location.href.lastIndexOf('/') + 1);
      var this_title = this_src.substring(this_src.lastIndexOf('/') + 1);
      this_title = this_title.replace(/-/g, ' ').replace(/_/g, ' ');


      this_poster = jpthis.attr('poster');

    }



    /**************************/

    //   var ext = getExt(extension);
    //   var supplied = getTypes(extension);

    newjPlayer(jpthis, this_src, this_title, this_poster);
    // newjPlayer(id, src, title, poster);

  }); // each end

}); // ready end

////////////// CREATE PLAYER //////////////////////
function newjPlayer(idobjec, this_src, this_title, this_poster) {

 var thePoster = '';

  //console.log(jpthis);

  //var jpTemplate = 
  //idobjec = 'testID'

  var getID = idobjec.attr("id");
  /*
        if (typeof checkid != "undefined") {
          //alert(checkid);
        }
     */
  if (!getID) {
    //if ( ( (typeof idobjec === "object") && (idobjec !== null) ) || !checkid ) {
    var id = new Date().getUTCMilliseconds();
    //alert("this is object: " + id);
  } else {
    //var id = idobjec.attr("id");
    var id = getID;
    //alert("find a ID: " + id);
    idobjec = $("#" + id);
  }
  
  //track-name'>" +obj.title + "</div> <div class='jp-artist-name'>" +obj.artist +"</div>';
  if (typeof this_poster != "undefined") 
  var thePoster = '<img id="mini_poster" src="' + this_poster + '">';

  idobjec.replaceWith('<div id="jquery_jplayer_' + id + '" class="jp-jplayer"></div><div id="jp_container_' + id + '" class="jp-audio" role="application" aria-label="media player"><div clas s="jp-type-playlist"><div class="jp-gui jp-interface flex-wrap"><div class="jp-controls flex-item"><button class="jp-previous" role="button" tabindex="0"><i class="fa fa-step-backward"></i></button><button class="jp-play" id="play-button" role="button" tabindex="0"><i class="fa fa-play"></i></button><button class="jp-next" role="button" tabindex="0"><i class="fa fa-step-forward"></i></button></div><div class="jp-progress-container flex-item"><div class="jp-time-holder"><span class="jp-current-time" role="timer" aria-label="time">&nbsp;</span><span class="jp-duration" role="timer" aria-label="duration">&nbsp;</span></div><div class="jp-progress"><div class="jp-seek-bar"><div class="jp-play-bar"><div class="bullet"></div></div></div></div></div><div class="jp-now-playing flex-item">' + thePoster + '<div class="jp-track-name">' + this_title + '</div><div class="jp-artist-name"></div></div><div class="jp-toggles flex-item"><button id="playlist-toggle" class="jp-show-playlist" role="button" tabindex="0"><i class="fa fa-music"></i></button><button class="jp-shuffle" role="button" tabindex="0"><i class="fa fa-random"></i><button class="jp-repeat" role="button" tabindex="0"><i class="fa fa-exchange"></i></button></button></div><div class="jp-volume-controls flex-item"><button class="jp-mute" role="button" tabindex="0"><i class="fa fa-volume-up"></i></button><div class="jp-volume-bar"><div class="jp-volume-bar-value"><div class="bullet"></div></div></div></div></div><div id="playlist-wrap" class="jp-playlist"><ul><li>&nbsp;</li></ul></div><div class="jp-no-solution"><span>Update Required</span> To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.</div></div></div>');

  //var extension = "mp3";

  if (typeof this_src != "undefined" || this_src != "")
    var extension = this_src.split('.').pop();
  else
    var extension = ".mp3";

  // if no extension
  var allowEXT = ["mp3", "mp4", "m4a", "ogg", "m4v"]; // 0 = match -1 = 
  var extMatch = allowEXT.indexOf(extension);
  // alert(extMatch);
  if (extMatch == -1) {
    extension = 'mp3' //alert('match');
      //this_title = 'radio internet'; // big guess
  }


  var ext = getExt(extension);
  var supplied = getTypes(extension);

  //alert(this_title);

  if (!this_src) {
    this_src = "http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3";

    if (!this_title)
      this_title = "My random title";
  }

  var re = new RegExp('.' + extension, "g");
  this_title = this_title.replace(re, "");

  var jpadd = {};
  jpadd[ext] = this_src;
  jpadd.title = this_title;
  jpadd.poster = this_poster;


  $("#jquery_jplayer_" + id).jPlayer({
    ready: function() {
      $(this).jPlayer("setMedia", jpadd);
    },
    play: function() { // To avoid multiple jPlayers playing together.
      $(this).jPlayer("pauseOthers");
    },
    //swfPath: "http://jplayer.org/latest/dist/jplayer/",
    swfPath: "../../dist/jplayer",
    solution: "html, flash",
    supplied: supplied,
    globalVolume: true,
    useStateClassSkin: true,
    autoBlur: false,
    smoothPlayBar: true,
    keyEnabled: true,
    cssSelectorAncestor: "#jp_container_" + id
  });
  
      /* === VOLUME DRAGGING ==== */
      $("#jp_container_" + id +" .jp-volume-bar")
        .mousedown(function() {
          var parentOffset = $(this).offset(),
            width = $(this).width();
          $(window).mousemove(function(e) {
            var x = e.pageX - parentOffset.left,
              volume = x / width;
            if (volume > 1) {
              $("#jquery_jplayer_" + id).jPlayer("volume", 1);
            } else if (volume <= 0) {
              $("#jquery_jplayer_" + id).jPlayer("mute");
            } else {
              $("#jquery_jplayer_" + id).jPlayer("volume", volume);
              $("#jquery_jplayer_" + id).jPlayer("unmute");
            }
          });
          return false;
        })
        .mouseup(function() {
          $(window).unbind("mousemove");
        });

      /* === ENABLE DRAGGING ==== */

      var timeDrag = false; /* Drag status */
      $("#jp_container_" + id +" .jp-play-bar").mousedown(function(e) {
        timeDrag = true;
        updatebar(e.pageX);
      });
      $(document).mouseup(function(e) {
        if (timeDrag) {
          timeDrag = false;
          updatebar(e.pageX);
        }
      });
      $(document).mousemove(function(e) {
        if (timeDrag) {
          updatebar(e.pageX);
        }
      });

      //update Progress Bar control
      var updatebar = function(x) {
        var progress = $("#jp_container_" + id +" .jp-progress");
        //var maxduration = myPlaylist.duration; //audio duration

        var position = x - progress.offset().left; //Click pos
        var percentage = 100 * position / progress.width();

        //Check within range
        if (percentage > 100) {
          percentage = 100;
        }
        if (percentage < 0) {
          percentage = 0;
        }

        $("#jquery_jplayer_" + id).jPlayer("playHead", percentage);

        //Update progress bar
        $("#jp_container_" + id +" .jp-play-bar").css("width", percentage + "%");
      };

  

  return;
}
//////////////////////////////////////////////////

function getTypes(ext) {

  if ((ext == 'mp3') || (ext == 'ogg') || (ext == 'm4a')) {
    return 'mp3,oga,m4a';
  } else {
    return 'mp4,mpeg,m4v';
  }
}

function getExt(ext) {

  if (ext == "mp4") ext = "m4v";
  if (ext == "ogg") ext = "oga";

  return ext;
}

/*
 $("#setAudio").click(function() {

   var jsonadd = {};
   jsonadd.mp3 = 'http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3';
   jsonadd.title = 'My new title';

   //var put = JSON.stringify(jsonadd)

   console.log(JSON.stringify(jsonadd));

   $("#jquery_jplayer_0").jPlayer("setMedia", jsonadd);

   $("#jp_container_0 .jp-title ul").html("<li>Bubble - MP3</li>");
   return false;
 })*/

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/jplayer/jquery.jplayer.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/add-on/jplayer.playlist.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>

style.css

code {
  border: solid 1px blue;
  width: 100%;
  display: inline-block;
}

audio,
a[href$=".mp3"],
a[href$=".m4v"],
a[href$=".mp4"] {
  display: none;
}


/* audio,
video,
a[href$="mp3"] {
  display: none;
} */


/* NEW AUDIO PLAYER */

body {
  /*  background: #777;*/
  background: transparent;
  background: url(https://i.pinimg.com/originals/fa/89/28/fa8928ac6d81b2c35ac33e12fe996ae4.jpg) no-repeat center center fixed;
  margin: 20px;
  -webkit-background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-transition: background 0.5s linear;
  transition: background .5s linear;
}

#bgimg {
  /*
  background: #777;
    background: url(https://i.ytimg.com/vi/21utsD1J7Ow/maxresdefault.jpg) no-repeat center center fixed; 
*/
  /*  background: url(https://i.pinimg.com/originals/fa/89/28/fa8928ac6d81b2c35ac33e12fe996ae4.jpg) no-repeat center center fixed;*/
  /*  background-image: url("https://i.ytimg.com/vi/21utsD1J7Ow/maxresdefault.jpg") no-repeat center center fixed; */
  -webkit-background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-transition: background 0.5s linear;
  transition: background .5s linear;
  /*
  -webkit-transition: background 0.5s ease-in-out;
  transition: background 0.5s ease-in-out;
*/
  /*
  -webkit-transition: background-image 0.5s ease-in-out;
  transition: background-image 0.5s ease-in-out;
*/
}


/*-------------- YOUTUBE PLAYER --------------*/

#yt-container {
  background-color: transparent;
  width: 100%;
  height: 600px;
}


/*-------------- AUDIO PLAYER --------------*/

.audio-player {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

video#jp_video_0 {
  position: absolute;
  left: 10px;
  bottom: 93px;
}

.no-flexbox .audio-player {
  display: none;
}

.flex-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.jp-controls.flex-item {
  /*
  -ms-flex-preferred-size: 150px;
      flex-basis: 150px;
*/
}


/*GC*/

.flex-item {
  margin: 0 10px;
}

.flex-item:first-of-type {
  margin-left: 0;
}

.jp-now-playing img#mini_poster {
  max-height: 50px;
  width: auto;
  float: left;
  margin-right: 10px;
}

.jp-progress-container.flex-item {
  margin-right: 0;
  /*
  -ms-flex-preferred-size: 350px;
      flex-basis: 350px;
*/
  -webkit-box-flex: 2;
  -ms-flex-positive: 2;
  flex-grow: 2;
  -ms-flex-negative: 2;
  flex-shrink: 2;
}

.jp-now-playing.flex-item {
  -ms-flex-preferred-size: 300px;
  flex-basis: 295px;
}

.jp-toggles.flex-item {
  /*
  -ms-flex-preferred-size: 130px;
      flex-basis: 130px;
*/
}

.jp-volume-controls.flex-item {
  -ms-flex-preferred-size: 155px;
  flex-basis: 155px;
}

.jp-audio,
.jp-audio-stream,
.jp-video {
  background: rgba(0, 0, 0, 0.85);
  padding: 15px;
  position: relative;
}


/*Controls*/

.jp-playlist {
  display: none;
}

.jp-interface .jp-controls button,
.jp-interface .jp-toggles button,
.jp-interface .jp-volume-controls button {
  background: none;
  border: none;
  outline: none;
  color: #7b7c8b;
  line-height: 24px;
  font-weight: 600;
  -webkit-transition-delay: 0;
  transition-delay: 0;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  font-size: 20px;
  padding: 0 5px;
}

.jp-interface .jp-controls .jp-play i,
.jp-interface .jp-controls .jp-previous i,
.jp-interface .jp-controls .jp-next i {
  font-size: 23px;
  color: #FFF;
}

.jp-interface .jp-controls .jp-play {
  border: solid 3px #FFF;
  border-radius: 50%;
  width: 52px;
  height: 52px;
  margin: 0 5px;
}

.jp-interface .jp-controls .jp-play i {
  padding-left: 5px;
  padding-top: 2px;
}

.jp-audio.jp-state-playing .jp-play i {
  padding-left: 0px;
}

.jp-audio.jp-state-seeking .jp-play i:before {
  content: "\f1ce" !important;
  /*  content: "\f021" !important;*/
  /*  content: "\f110" !important;*/
  /*
  padding-left: 0 !important;
  padding-top: 2px !important;
*/
  /*  padding-top: 2px;*/
}

.jp-audio.jp-state-playing .jp-play i:before {
  content: "\f04c";
  /*  content: "\f04c" !important;*/
}

img#jp_poster_0 {
  display: none !important;
}


/* GC SPIN */

.jp-audio.jp-state-seeking .jp-play,
.playing.buffering {
  display: inline-block;
  -webkit-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/*
.jp-interface .jp-controls .jp-play i {
    padding-left: 5px;
    padding-top: 2px;
}
*/


/*.jp-audio.jp-state-seeking .jp-play i:before  {*/


/*
.jp-audio.jp-state-seeking .jp-play i:before  {
display: none;
}
*/


/*
.jp-audio.jp-state-seeking i.fa.fa-play.playpause {
    display: none;
}

.jp-audio.jp-state-seeking i.fa.fa-circle-o-notch.fa-spin.js-seek {
  display: block !important;
  padding-top: 2px;
}
*/


/*Progress bars*/

.jp-progress-container,
.jp-volume-bar-container {
  height: 30px;
  padding: 10px;
}

.jp-progress,
.jp-seek-bar,
.jp-play-bar,
.jp-volume-bar,
.jp-volume-bar-value {
  height: 8px;
  border-radius: 1px;
}

.jp-progress {
  margin: 0 50px;
  background-color: #2b2b2b;
  border-radius: 5px;
}

.jp-seek-bar,
.jp-volume-bar {
  cursor: pointer;
  background-color: #2b2b2b;
  border-radius: 5px;
}

.jp-play-bar {
  float: left;
  position: relative;
  /*  background-color: #00c85f;*/
  background-color: #04a9f3;
  border-radius: 5px;
  overflow: visible !important;
}

.jp-volume-bar-value {
  float: left;
  position: relative;
  background-color: #aaaaaa;
}

.jp-progress .bullet,
.jp-volume-bar .bullet {
  position: absolute;
  content: "";
  top: -5px;
  right: -7px;
  height: 18px;
  width: 18px;
  background: #ffffff;
  border-radius: 50%;
}

.jp-time-holder {
  position: relative;
  top: 0;
  color: #979797;
  font-size: 12px;
}

.jp-time-holder .jp-current-time {
  position: absolute;
  left: 0;
  top: -3px;
}

.jp-time-holder .jp-duration {
  position: absolute;
  right: 0;
  top: -3px;
}


/* Track & Artist */

.jp-now-playing {
  padding: 0 10px;
}

.jp-track-name {
  color: #c9c9c9;
  font-size: 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 250px;
}

.jp-artist-name {
  color: #6d6d6d;
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 245px;
}


/* Toggles */

.jp-toggles button {
  margin: 0 3px;
}

.jp-toggles button:hover {
  color: #FFF;
}

.jp-state-looped .jp-toggles .jp-repeat,
.jp-state-shuffled .jp-toggles .jp-shuffle,
.jp-interface .jp-toggles .playlist-is-visible.jp-show-playlist {
  color: #04a9f3;
  /*  color: #00c85f;*/
}


/* Volume Controls */

.jp-volume-controls button {
  float: left;
}

.jp-volume-controls .jp-volume-bar {
  margin-left: 40px;
  margin-top: 8px;
}

.jp-state-muted .jp-mute i:before {
  content: "\f026" !important;
}

.jp-volume-bar,
.jp-volume-bar-value {
  border-radius: 5px;
}

.jp-state-no-volume .jp-volume-controls {
  display: none;
}


/* Playlist  */

.jp-playlist {
  position: absolute;
  right: 65px;
  bottom: 100%;
  background: rgba(0, 0, 0, 0.8);
  padding: 20px 25px;
  width: 400px;
}

.jp-playlist ul {
  padding: 0;
  margin: 0;
  max-height: 200px;
  overflow: auto;
}

.jp-playlist li {
  list-style: none;
}

.jp-playlist li a {
  color: #c9c9c9;
  display: block;
  padding: 10px 0;
  outline: none;
  border-bottom: 1px solid #1F1F1F;
}

.jp-playlist li:last-child a {
  border-bottom: 0;
}

.jp-playlist li a:hover,
.jp-playlist li a:focus,
.jp-playlist li a:active,
a.jp-playlist-item.jp-playlist-current {
  color: #04a9f3;
  /*  color: #00c85f;*/
  text-decoration: none;
}

.jp-playlist li a span {
  color: #6d6d6d;
}


/* ==================== Media Query ==================== */

@media (max-width: 992px) {
  .jp-now-playing {
    display: none;
  }
}

@media (max-width: 767px) {
  .jp-volume-bar,
  .jp-volume-bar .bullet,
  .jp-time-holder {
    display: none !important;
  }
  .jp-progress-container.flex-item {
    /*
    -ms-flex-preferred-size: 140px;
        flex-basis: 140px;
*/
    padding: 12px 15px;
  }
  .jp-progress .bullet {
    right: -10px;
  }
  .jp-volume-controls.flex-item {
    -ms-flex-preferred-size: 33px;
    flex-basis: 33px;
  }
  .jp-progress {
    margin: 0;
  }
  .jp-interface .jp-controls .jp-play {
    margin: 0 3px;
  }
  .jp-interface .jp-controls .jp-play i,
  .jp-interface .jp-controls .jp-previous i,
  .jp-interface .jp-controls .jp-next i {
    font-size: 16px;
  }
  .jp-interface .jp-controls .jp-play {
    width: 42px;
    height: 42px;
  }
  .jp-interface .jp-controls .jp-play i {
    padding-left: 3px;
    padding-top: 0;
  }
  .jp-state-playing .jp-interface .jp-controls .jp-play i {
    padding-left: 0;
  }
  .jp-controls.flex-item {
    /*
    -ms-flex-preferred-size: 100px;
        flex-basis: 100px;
*/
    margin: 0 10px;
  }
  .jp-controls.flex-item:first-of-type {
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  .jp-toggles,
  .jp-playlist {
    display: none !important;
  }
}


/* GC */

.jp-interface .jp-controls button,
.jp-interface .jp-toggles button,
.jp-interface .jp-volume-controls button {
  font-size: 18px;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet" />