html 使用CSS和Font Awesome设置样式链接

Posted 2021-05-11

<style>
body {
  padding: 1em;
  background: black;
}
a:before {
  clear: both;
  content: " ";
  display: table;
}
a:after {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-color: white;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  margin-left: 5px;  
}
/* fully valid URL, likely external link */
a[href^="http://"]:after {
  content: "\f08e";
  color: #333;
}
/* PDF file */
a[href$=".pdf"]:after {
  content: "\f1c1";
  color: red;
}
/* Microsoft Word document */
a[href$=".doc"]:after,
a[href$=".docx"]:after {
  content: "\f1c2";
  color: #2c5898;
}
/* Microsoft Excel document */
a[href$=".xls"]:after,
a[href$=".xlsx"]:after {
  content: "\f1c3";
  color: #207347;
}
/* Music file */
a[href$=".mp3"]:after {
  content: "\f1c7";
  color: #333;
}
/* Archive file */
a[href$=".zip"]:after {
  content: "\f1c6";
  color: #fdb516;
}
<style>
<a href="http://www.domain.com/filetype.pdf">Link to PDF document</a>
<a href="http://www.domain.com/">External link</a>
<a href="http://www.domain.com/filetype.doc">Microsoft Word Document link</a>
<a href="http://www.domain.com/filetype.xls">Microsoft Excel Document link</a>
<a href="http://www.domain.com/filetype.mp3">MP3 File link</a>
<a href="http://www.domain.com/filetype.zip">ZIP File link</a>