CSS Simgeler ve İkonlar

Web tasarım kursumuzun CSS derslerine simgeler ve bağlantılarla devam ediyoruz. Herkese başarılar dilerim.

CSS Simgeler

Web tasarımlarımızda çok sık kullanacağımız simgeler konusunu işleyeceğiz.

Bu derste tasarımını yaptığımız bir internet sayfasına nasıl ikon ve simge ekleyebileceğimize göz atacağız.

Simgeler Nasıl Eklenir?

Bir HTML sayfasına simge eklemenin en basit ve kullanışlı yollarından biri Font Awesome kullanmaktır.

Font Awesome simge kitaplığından aldığınız her öğeyi HTML etiketleri arasına yerleştirip CSS ile stil verebilirsiniz.

Kitaplığı kullanabilmek için aşağıdaki bağlantıyı sayfamızın kaynak kodlarında <head> etiketinin içine kopyalarız. Hepsi bu kadar.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Bu şekilde hiçbir indirme ve yükleme işlemi yapmadan kitaplığı sayfamıza dahil etmiş oluruz.

Nasıl ekleneceğini daha iyi anlamanız açısından bir de örnek verelim:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<i class="fa fa-cloud"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>

</body>
</html>

Not: Bu örnek Font Awesome 4.7 sürümüne göredir. Güncel sürümlerde sınıf adları değişmiştir (örneğin fa-solid fa-cloud).

Bootstrap Simgeleri

Bootstrap Glyphicons da kullanmak isteyenler için ayrı bir alternatiftir.

Nasıl ekleyeceğimize gelince, önceki örnekte olduğu gibi sayfamızın <head> etiketleri arasına bağlantıyı yapıştırmamız yeterli olacaktır.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Hiçbir indirme veya yükleme yapmadan sitemize dahil etmiş oluyoruz.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>

</body>
</html>

Not: Glyphicons yalnızca Bootstrap 3’te yer alır; sonraki sürümlerde simgeler ayrı bir kitaplık olan Bootstrap Icons ile sunulur.

Google Simgeleri

Google simgelerini sayfamıza dahil etmek için diğer örneklerde olduğu gibi sayfamızın <head> kodları arasına kitaplık bağlantısını yapıştırıyoruz.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Bu şekilde yine hiçbir indirme veya yükleme yapmadan sayfamıza Google simgelerini dahil edebiliyoruz.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>

</body>
</html>

CSS Bağlantılar

CSS’te bağlantılara ve bağlantı düğmelerine stil vermek için kullandığımız bazı özellikler vardır. Şimdi onlara bir göz atalım.

Şekillendirme Özellikleri

Bağlantılar varsayılan olarak mavi renkli ve altı çizili gelir; bu da her tasarıma uyan bir görüntü değildir.

Bağlantıları stillerle düzenleyerek hoş bir görüntü elde etmek mümkün.

a {
    color: hotpink;
}

Buna ek olarak bağlantıların 4 farklı durumu vardır:

a:link – Ziyaret edilmemiş, sayfanın ilk yüklendiği hâlindeki bağlantı
a:visited – Kullanıcının daha önce ziyaret ettiği bağlantı
a:hover – Fare bağlantının üzerine geldiğinde bağlantının aldığı hâl
a:active – Bağlantıya tıklandığı anda bağlantının aldığı hâl

a:link {
    color: red;
}

a:visited {
    color: green;
}

a:hover {
    color: hotpink;
}

a:active {
    color: blue;
}

Metin Dekorasyonu

text-decoration özelliği, bağlantılarda varsayılan olarak gelen alt çizgiyi kaldırmak için kullanılır.

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

Arka Plan Rengi

background-color bağlantılar için bir arka plan rengi belirlemekte kullanılır.

a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
}

Gelişmiş Bağlantı Düğmeleri

Yukarıda da bahsettiğimiz gibi bağlantılar varsayılan olarak mavi renkte, altı çizili ve kenarlıksız gelir.

Şimdi bu zamana kadar öğrendiğimiz CSS özellikleri ile güzel bir bağlantı düğmesi yapalım.

a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

a:hover, a:active {
    background-color: red;
}

Bağlantı Düğmesi

Web tasarım kursumuzun CSS derslerinin bu bölümünü de işlemiş bulunuyoruz. Herkese başarılar dilerim.