Icon fontawesome [1]

<div class="wrap-icon"> <div class="wrap-inner"> <i class="fa fa-plane fa-3x"></i> </div> </div>
  • And where did you take this example? If on the site of some kind, you can look right there in CSS. - koks_rs

3 answers 3

As an option, I don’t know, it can be easier, but I usually do things like this:

 .wrap-inner{ position: relative; width: 48px; height: 48px; padding: 16px; text-align: center; color:red; transition: all 300ms; } .wrap-inner:hover{ color:green; } .corner{ position: absolute; width: 16px; height: 16px; border-width: 3px; } .top{ top: 0; border-top-style: solid; } .left{ left: 0; border-left-style: solid; } .bottom{ bottom: 0; border-bottom-style: solid; } .right{ right: 0; border-right-style: solid; } .top.left{ border-radius: 5px 0 0 0; } .top.right{ border-radius: 0 5px 0 0; } .bottom.right{ border-radius: 0 0 5px 0; } .bottom.left{ border-radius: 0 0 0 5px; } 
 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="wrap-icon"> <div class="wrap-inner"> <i class="fa fa-plane fa-3x"></i> <div class="corner top left"></div> <div class="corner top right"></div> <div class="corner bottom right"></div> <div class="corner bottom left"></div> </div> </div>

    You can play SVG:

     .orange { color: orange } 
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" /> <div class="wrap-icon"> <div class="wrap-inner"> <svg viewBox="0 0 100 100" width="50px"> <path d="M25,2 L2,2 L2,25" fill="none" stroke="orange" stroke-width="3" /> <path d="M2,75 L2,98 L25,98" fill="none" stroke="orange" stroke-width="3" /> <path d="M75,98 L98,98 L98,75" fill="none" stroke="orange" stroke-width="3" /> <path d="M98,25 L98,2 L75,2" fill="none" stroke="orange" stroke-width="3" /> <foreignobject x="25" y="25"> <i class="fa fa-plane fa-3x orange"></i> </foreignobject> </svg> </div> </div>

    An example took here

    • The best implementation :) Just tweak an example - Yuri

    Well, here's another, as an option. But it is not recommended for use, as it is a crutch :)

     .wrap-inner { position: relative; width: 48px; height: 48px; padding: 16px; text-align: center; color: red; transition: all 300ms; border: 3px solid red; border-radius: 5px; } .wrap-inner:before { display:block; content: ''; position: absolute; top: 18px; left: -3px; width: calc(100% + 6px); height: 40px; background-color: white; z-index: 1; } .wrap-inner:after { display:block; content: ''; position: absolute; left: 18px; top: -3px; width: 40px; height: calc(100% + 6px); background-color: white; z-index: 1; } .wrap-inner:hover { color: green; } .fa {position: relative; z-index: 2} 
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <div class="wrap-icon"> <div class="wrap-inner"> <i class="fa fa-plane fa-3x"></i> </div> </div>