blade1989 / NewOS

Seeking for a new os? you've come to the right place!
http://blade1989.github.io/NewOS/
0 stars 0 forks source link

NewOS icon #2

Open blade1989 opened 9 years ago

blade1989 commented 9 years ago

When playing with the font-awesome icons, i found this to be a nice Icon:

 .fa-linux:before {
     background: none repeat scroll 0 0 #454545;
     border-radius: 50%;
     color: #aaaaaa;
     content: "";
     padding: 20px;
     text-shadow: 1px 1px 1px #000000;
}

newos-icon-two

Played with the code a bit, and this is the second favicon.ico

newos-icon-one

blade1989 commented 9 years ago

EDIT/UPDATE NewOS Icon V 0.3

Removed all of the Linux Distributions icons. Reduced the noise of the icon.

newosv0 3

--- HTML ---

        <div id="newos">

            <i class="fa fa-linux"></i>

                <span class="small">NewOS</span>

        </div>

--- CSS ---

    #newos {
        background: none repeat scroll 0 0 #454545;
        border-radius: 50%;
        color: #ffffff;
        height: 35px;
        padding: 20px;
        text-shadow: 1px 1px 1px #000000;
        width: 35px;
    }

    #newos .fa-linux:before {
        content: "";
        float: right;
        font-size: 25px;
        margin: -6px 0 0 24%;
    }

    #newos span.small {
        margin: 0 0 0 -7px;
    }

NewOS Icon V0.2:

newosiconv0 2

---CSS---

 #newos {
      background: none repeat scroll 0 0 #454545;
      border-radius: 50%;
      color: #aaaaaa;
      padding: 20px;
      text-shadow: 1px 1px 1px #000000;
      width: 35px;
 }

#newos .fa-linux:before {
    content: "";
    display: block;
    margin: 0 0 0 40%;
}

#newos span.small {
    margin: 0 0 0 -7px;
}

.fl-ubuntu:before, .fl-archlinux:before, .fl-debian:before, .fl-fedora:before, .fl-linuxmint:before, .fl-opensuse:before {
    display: inline;
    font-size: 10px;
    margin: 0;
    padding: 0;
    position: absolute;
}

.fl-ubuntu:before {
    content: "";
    margin-left: 40px;
    margin-top: 10px;
}

.fl-archlinux:before {
    content: "";
    margin: -10px;
}

.fl-debian:before {
    content: "";
    margin-left: 5px;
    margin-top: -15px;
}

.fl-fedora:before {
    content: "";
    margin-top: -15px;
    padding: 0 0 0 23px;
}

.fl-linuxmint:before {
    content: "";
    margin-left: -15px;
    margin-top: 6px;
}

.fl-opensuse:before {
    content: "";
    margin-left: 35px;
    margin-top: -5px;
}

---HTML---

 <div id="newos">
      <i class="fl-ubuntu"></i>
      <i class="fl-archlinux"></i>
      <i class="fl-debian"></i>
      <i class="fl-fedora"></i>
      <i class="fl-linuxmint"></i>
      <i class="fl-opensuse"></i>
      <i class="fa fa-linux"></i>
           <span class="small">NewOS</span>
 </div>

Beta favicon, still needs fixing!

---OLD---

This is an example I am still working on. Not ready yet. On the right you see the Linux icon, on the left I might add several Linux distributions icon!

newos

CSS

 #newos {
      background: none repeat scroll 0 0 #454545;
      border-radius: 50%;
      color: #aaaaaa;
      padding: 20px;
      text-shadow: 1px 1px 1px #000000;
      width: 35px;
 }

 #newos .fa-linux:before {
      content: "";
      margin: 0 0 0 58%;
 }

 #newos span.small {
      margin: 0 0 0 -5px;
 }     

HTML

 <div id="newos">
      <i class="fa fa-linux">
           <span class="small">NewOS</span>
      </i>
 </div>

This is all done with css, html. Might complete it using Vector Graphics software like inkscape!