範例:Wild Life(桌機header)

【範例結果】

二、Web Font的應用

課程使用網站

1 Flaticon:   http://www.flaticon.com/

2 Awesome:

(1) 網址:  http://fontawesome.io/

(2) Awesome CDN: https://fontawesomecdn.com/

一般設定

* { padding: 0; margin: 0;}
body {
    font-family: 'FontAwesome',verdana, "微軟正黑體", sans-serif;
    font-size: 16px;
}
ul,ol,li { list-style-type: none;}
a { text-decoration: none;}

header、logo區

/*header===============================================*/

header {
    background: #00897b;
    height: 100px;
    box-shadow: 0 1px 2px #000;
    
    position: relative;
}

/*#logo=========*/

#logo {
    background: url(image/logo.png) no-repeat;
    width: 300px;  height: 100%;
    position: absolute;    left: 50%;    margin-left: -150px;
    text-indent: 300px;   white-space: nowrap;   overflow: hidden;
}

#nav 區

/*#nav=========*/
#nav {
    position: absolute;   bottom: 0px;    right: 20px;
}

#nav li {
    float: left;
}

#nav li a {
	color: #fff;  font-size: 20px; 
/*  background: #333;   加入目的:了解行內樣式情形*/
    padding: 0 20px; line-height: 50px; display: block;
    
    transition: all .5s;
    border-bottom: 10px solid transparent;
    
    position: relative;
}

#nav li a:hover {
    border-bottom: 10px solid #ff6f00;
    filter: drop-shadow(0 0 2px rgba(0,0,0,1));   /*自行參考連結*/
}

/* #nav li a:before======*/
#nav li a:before {
  padding-right: 5px; font-size: 20px; color: #880e4f;
}

#nav li:nth-child(1) a:hover:before {
    content: '\f015';
    font-family: 'FontAwesome';
}
#nav li:nth-child(2) a:hover:before { content: "\f03a"; }
#nav li:nth-child(3) a:hover:before { content: "\f004"; }
#nav li:nth-child(4) a:hover:before { content: "\f2bd"; }

/* #nav li a:after=======*/
#nav li a:after {
    content: "";
    border-top: 10px solid #ff6f00;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    
    position: absolute;
    left: 50%; bottom: -20px; margin-left: -10px; 
    
    opacity: 0; transition: all .5s;
}

#nav li a:hover:after{
 /*   position: absolute;
      left: 50%; bottom: -20px; margin-left: -10px; */
    
    opacity: 1;
}

filter: drop-shadow(0 0 2px rgba(0,0,0,1));  參考連結:【連結1】、【連結2