Yeni TL Simgesi Kullanımı

Artık bir çok web tasarımcısının ve web programcısının ihtiyaç duyduğu hususlardan birisi yeni TL simgesinin kullanımı.

Yeni TL simgesinin kullanımına “abakutlsymsans”  font dosyasını indirerek başlayabiliriz.

İndirdiğimiz fontu web sitemize entegre etmek için html dosyasımıza aşağıdaki kodu ekleyelim.

<style type="text/css" media="screen, print"><!--
@font-face {
font-family: 'AbakuTLSymSansRegular';
src: url('tl_simgesi/abakutlsymsans.eot');
src: url('tl_simgesi/abakutlsymsans.eot?#iefix')format('opentype'),
url('tl_simgesi/abakutlsymsans.woff')format('woff'),
url('tl_simgesi/abakutlsymsans.ttf')format('truetype'),
url('tl_simgesi/abakutlsymsans.svg#AbakuTLSymSansRegular')format('svg');
font-weight: normal;
font-style: normal;
}
--></style>

Yeni TL simgesinin kullanımının en önemli farkı,fiyat bilgisinin sağında değil solunda olmasıdır.

Para miktarını ve solundaki TL simgesini bir div içerisinde yazıyoruz ve bu div’in id’sini tl olarak belirleyelim.

<div id="tl">350</div>

Uygulamamızda TL simgesinin belirtilen miktarın sonunda mı yoksa başında mı olması gerektiğini yine css ile belirtiyoruz.

Yazı fontunu import ettiğimiz Css kodlarının bitimine aşağıdaki Css’i ekleyerek simgenin başında yada sonunda olduğunu belirtiyoruz.


#tl:before{
font-family: "AbakuTLSymSansRegular", serif;
font-size:24px;
content:"t";
}

#tl:before ile simgenin div den önce gelmesi gerektiğini söyledik.Eğer siz yeni TL simgesini miktarın sonunda olmasını istiyorsanız bu değeri #tl:after olarak değiştirebilirsiniz.

Html dosyasımızın son görüntüsü şu şekilde olacaktır;

 


<htmlxmlns="http://www.w3.org/1999/xhtml">
<styletype="text/css" media="screen, print">
@font-face {font-family: 'AbakuTLSymSansRegular';src: url('tl_simgesi/abakutlsymsans.eot');src: url('tl_simgesi/abakutlsymsans.eot?#iefix')format('opentype'),url('tl_simgesi/abakutlsymsans.woff')format('woff'),url('tl_simgesi/abakutlsymsans.ttf')format('truetype'),url('tl_simgesi/abakutlsymsans.svg#AbakuTLSymSansRegular')format('svg');font-weight: normal;font-style: normal;}#tl:before{font-family: "AbakuTLSymSansRegular", serif;font-size:22px;content:"t";}

<div id="tl">500</div>

Artık yeni TL simgesini projelerinizde kullanabilirsiniz..

Posted Under

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir