thementholist: PNG Datei als Icon?

Beitrag lesen

SELF-Forum

PNG Datei als Icon?

thementholist
– Informationen zu den Bewertungsregeln

Grüßt euch!

Ich bin neu im Forum und ebenso neu in Sachen Html und CSS. Ich habe ein Pop-up Menu mit diesem guide: https://www.youtube.com/watch?v=RLCKShRRwG0 erstellt und es funktioniert auch alles.

Nun würde ich gerne einige dieser Icons ersetzen. Ich habe bereits ein eigenes Icon als Png und svg-datei erstellt. Nur habe ich keine Ahnung wie ich diese Google Icons mit meinen eigenen Icons ersetzen soll. Ist dies überhaupt möglich? Geht dadurch der hover effekt verloren?

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-utf-8">
    <title>Pop Out Menu</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

    <link rel="stylesheet" href="menu2.css">
     <link href="Main.css" rel="stylesheet"/>
 
    
    </head>
    
    <body>
    
       
        <div id="header">
        <div class="header">
            <img class="header-img" src="banner3.png"  height="152"; width="100%"; />
            </div>
   </div>
         
        
        
       
        
<div class="container"onclick="expand()">
            
    <div class="toggle" id="toggle">
        <i class="material-icons" id="add">
            add
        </i>
        </div>
    </div>
<div class="menu" id="menu">
        <div class="item">
             <a href="menu2.html">
                <i class="material-icons">home</i>
                </a>
             </div>
    
    <div class="item">
             <a href="#">
        <i class="material-icons">notifications</i>
        </a>
             </div>
    <div class="item">
             <a href="#">
                 <i class="material-icons">mail</i>
        </a>
             </div>
    <div class="item">
             <a href="#">
                 <i class="material-icons">add_a_photo</i>
                </a>
             </div>
    <div class="item">
             <a href="#">
        <i class="material-icons">videocam</i>
        </a>
             </div>
        
    <div class="item">
             <a href="#">
            <i class="material-icons">search</i>
            </a>
    </div>
        
        </div>
    
        <script type="text/javascript">
            var j=0;
            var i=document.getElementById("menu").childNodes;
            function expand(){
                if(j==0){
                document.getElementById("add").style.transform = 'rotate(45deg)';
                    document.getElementById("menu").style.transform = 'scale(1)';
                    i[1].style.transform='translateY(-160px)';
                     i[3].style.transform='translate(140px,-80px)';
                     i[5].style.transform='translate(140px,80px)';
                     i[7].style.transform='translateY(160px)';
                     i[9].style.transform='translate(-140px,80px)';
                     i[11].style.transform='translate(-140px,-80px)';
                    j=1;
                }
                
            else{
                document.getElementById("add").style.transform = 'rotate(0deg)';
                document.getElementById("menu").style.transform = 'scale(0.9)';
                    i[1].style.transform='translateY(0)';
                 i[3].style.transform='translate(0)';
                     i[5].style.transform='translate(0)';
                     i[7].style.transform='translateY(0)';
                     i[9].style.transform='translate(0)';
                     i[11].style.transform='translate(0)';
                j=0;
                }
                

                }

        </script>
    
    </body>
    </html>

`

CSS:

body{
    background-color: #2a3a49;
    background: url(darkhoneycomb.png) no-repeat center center fixed;
    
    background-size: cover;
    margin: 0;
    position: absolute;
    left: 650px;
    bottom: 0px; 
    padding: inherit;
}



#left {
    position: absolute;
    top: 60%;
}

#right {
    position: absolute;
    top: 20%;
    right: 0;
    z-index: 1;
}

nav {
    padding: 50px;
}
nav ul {
    list-style-type: none;
    float: right;
}
nav ul li {
    float: left;
}
nav ul li a {
    color: #000000;
    padding: 0 30px;
}

*{
    margin: 0;
    padding:0;
    list-style: none;
    text-decoration: none;
}
.header{
    width: 100%;
    height: 90px;
    display: block;
    background-color: #000000;
    position: fixed;
    top: 42px;
    left:0px;
    margin:0 auto;
    
}

.header-img{ 
    width: auto;
    position: fixed;
    margin-top: auto;
    margin: 0 auto;
    height: 170px;
    top: 5px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    
}


    
}

.logo_container{
    height: 100%;
    display: table;
      float: left;
        color:white;
    
}

#logo {
    font-size: 2em;
}
.container {
    text-align: center;
    width: 60%;
    margin: 110px auto;
    position: fixed;
    left: auto;
}

h1 {
    font-size: 1.3em;
    line-height: 1.4em;
}

#banner {
    background-color: none;
    position: fixed;
    top:0;
    margin: auto;
    top: 0;
    bottom: 509px;
    left: 0px;
    right: 0;
    width: auto
}

.container,.menu{
    height: 40px;
    width: 160px;
    position: fixed;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0px;
    right: 0;
    cursor: pointer;
}
.menu{
    z-index: -1;
    transform: scale(0.9);
}
toggle{
    height: 0;
    width: 80px;
    position: absolute;
    top:0;
}
.toggle{
    height: 0;
    width: 80px;
    border-bottom: 70px solid #FBD244;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    position: absolute;
    top:0;
}
.toggle:before{
    content: '';
    height: 0;
    width: 80px;
    border-top: 70px solid #f9d230;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    position: absolute;
    top:70px;
    Left: -40px;
    
}
.item{
    height: 0;
    width: 80px;
    border-bottom: 70px solid #000000;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    position: absolute;
    top:0;
    transition: 1s;
}
.item:before{
    content: '';
    height: 0;
    width: 80px;
    border-top: 70px solid #000000;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    position: absolute;
    top:70px;
    Left: -40px;
    
}
#add{
    font-size: 100px;
    color: white;
    position: relative;
    top: 20px;
    right: 10px;
    transition: 1s;
}
a>.material-icons{
    color:#d2d2d2;
    font-size: 60px;
    
}
a{
    position: relative;
    top:40px;
    left: 10px;
}
a>.material-icons:hover{
    color:#f9d230;
    transform: scale(1.3);
    
      }
a.{
    position: relative;
    top: 40px;
    left: 10px;
}


}

LG TheMentholist

Beitrag melden
–
Informationen zu den Bewertungsregeln