LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

CSS File Icons

Welcome!

Here I have used the CSS3 attribute selector to automatically make the relevent icons appear before any links to certain filetypes I have in my page. That is, there are no classes involved, CSS3 can see what is linked to and add the relevent icon if it links to a filetype we specify - nifty hey! Check it out below, feel free to swap the extensions round in the html and see the icons magically change!

CSS
a:before{
  margin: 0 10px 0 5px;
}

a[href$=".docx"]:before {
  content:url(https://img.informer.com/icons/png/16/4135/4135583.png);
}

a[href$=".pttx"]:before {
  content:url(http://icons.iconarchive.com/icons/carlosjj/microsoft-office-2013/16/PowerPoint-icon.png);
}

a[href$=".xlsx"]:before {
  content:url(http://icons.iconarchive.com/icons/carlosjj/microsoft-office-2013/16/Excel-icon.png);
}

a[href$=".pdf"]:before {
  content:url(http://www.wischenbart.com/img/pdf_icon.gif);
}

/* ------- Other styles -------- */

html{
  background-color:#eee;
}

#container{
  margin:0 auto;
  padding:2em;
  min-height:100%;
  max-width:800px;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif, Consolas;
  font-size:14px;
  line-height:1.5em;
  color:#333;
  background-color:#fff;
  -webkit-box-shadow:0 0 12px rgba(0,0,0,0.4);
  -moz-box-shadow:0 0 12px rgba(0,0,0,0.4);
  box-shadow:0 0 12px rgba(0,0,0,0.4);
  overflow: hidden;
  border-radius: 15px;
  margin-top: 25px;
}

h1{
  font-size:30pt;
}

p{
  text-align:justify;
  text-justify:inter-word;
}

ul.left{
  list-style: none;
  width:45%;
  float: left;
}

ul.right{
  list-style: none;
  width:45%;
  float: right;
}

a{
  text-decoration:none;
  color:#111;
}

a:hover{
  text-decoration:underline;
}

nav {
  padding: 12px 0;
  border-top: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
}

nav a{
  color:#00F;
}

nav a:hover {
  text-decoration:none;
}

nav a:hover span {
  text-decoration:underline;
}

nav a:after {
  content: ">";
  padding: 0 8px;
}

nav a:last-child:after {
  content: "";
  padding: 0;
}
JS
$('a').click(function(){return false});

Description

Automatically add icons to file links
Term
Sat, 04/14/2018 - 20:45

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv