Link Icons

by j_mc_falcon_19

HTML

<script src="https://fonts.gstatic.com"></script>
<script src="https://fonts.googleapis.com/css2?family=Open+Sans&amp;display=swap"></script>


<ul>
    <li>
        <a  class="link-item" href="https://dev.to/" > 
            <span class="link-image">
                  <img src="https://dev.to/favicon.ico" 
                   onerror="this.onerror=null; this.src='https://s2.googleusercontent.com/s2/favicons?domain=www.dev.to'" 
                   alt="Dev.to" width="25" height="25"
                  />
            </span> 
            <span class="link-text">
               www.dev.to
            </span>
        </a>
    </li>

    <li>
        <a  class="link-item" href="https://stackoverflow.com/" > 
            <span class="link-image">
                  <img src="https://stackoverflow.com/favicon.ico" 
                   onerror="this.onerror=null; this.src='https://s2.googleusercontent.com/s2/favicons?domain=www.stackoverflow.com'" 
                   alt="Stack Overflow" width="25" height="25"
                  />
            </span> 
            <span class="link-text">
               www.stackoverflow.com
            </span>
        </a>
    </li>

    <li>
        <a  class="link-item" href="https://wikipedia.com/" > 
            <span class="link-image">
                  <img src="https://wikipedia.com/favicon.ico" 
                   onerror="this.onerror=null; this.src='https://s2.googleusercontent.com/s2/favicons?domain=www.wikipedia.com'" 
                   alt="Wikipedia" width="25" height="25"
                  />
            </span> 
            <span class="link-text">
               www.wikipedia.com
            </span>
        </a>
    </li>

</ul>

CSS

ul{
  width:200px;
}
li{
  list-style: none;
  border-bottom: 1px solid #ababab2e;
  padding: 9px;
}

.link-item{
  display: flex;
  align-items: center;
  text-decoration: none;
}
.link-image{
  width:25px;
  height:25px;
  margin-right: 10px;
}
.link-text{
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
}
a {color:#252525;}        
a:visited {color:#252525;} 
a:hover {color:#2196f3;}   
a:active {color:#252525;}