font awesome - CSS ile border vermek

23.09.2019 07:49

GunduzT WM Aracı Kullanıcı

Üyelik 29.01.2019
Yaş/Cinsiyet 38 / E
Meslek web tasarımı
Konum İstanbul Anadolu

Ad Soyad G** T**
Mesajlar 105
Beğeniler 104 / 46
Ticaret 0, (%0)

Merhaba,

font.awesome iconlarına CSS yardimi ile border verdim. (font awesome 4.7)
verdiğim border genel olarak düzgün çalışıyor.
fakat fa-user iconunda elips olarak geliyor.

bu sorunu nasıl çözebilirim?

kullandigim css kodu
.halka {
padding: 5px;
border: 1px solid #1ab4b2;
border-radius: 50%;
color: #1ab4b2;}

1- radius değerini oynamak sorunu çözmüyor.
2- firefox, chrome ... sorun değişmiyor.

23.09.2019 08:22

#2

nozver WM Aracı Kullanıcı

Üyelik 12.01.2019
Yaş/Cinsiyet 31 / E
Meslek Öğrenci
Konum Tekirdağ

Ad Soyad N** Ö**
Mesajlar 271
Beğeniler 36 / 81
Ticaret 0, (%0)

Padding:5px değerini padding:5px 7px; olarak değiştirin.

1 kişi bu mesajı beğendi.

23.09.2019 13:31

#3

nozver WM Aracı Kullanıcı

Üyelik 12.01.2019
Yaş/Cinsiyet 31 / E
Meslek Öğrenci
Konum Tekirdağ

Ad Soyad N** Ö**
Mesajlar 271
Beğeniler 36 / 81
Ticaret 0, (%0)

aaaaa

23.09.2019 15:13

#4

GunduzT WM Aracı Kullanıcı

Üyelik 29.01.2019
Yaş/Cinsiyet 38 / E
Meslek web tasarımı
Konum İstanbul Anadolu

Ad Soyad G** T**
Mesajlar 105
Beğeniler 104 / 46
Ticaret 0, (%0)

Padding:5px değerini Padding:5px 7px; yapınca o ikondaki durum düzeliyor ama diğerleri bozuluyor :-)
Evet sadece o ikona özel bir stil tanımlayabilirim ama bana doğru gelmiyor.
her ikona özel CSS yazmaya başlarsak bu işin sonu yok.

gözden kaçan başka bir çözüm olmalı.

24.09.2019 01:12

#5

ikodev Developer Kullanıcı

Üyelik 08.05.2015
Yaş/Cinsiyet 28 / E
Meslek Developer
Konum Samsun

Ad Soyad İ** Ş**
Mesajlar 1020
Beğeniler 321 / 320
Ticaret 19, (%100)

Esnemesi mantıklı değil ama muhtemelen ya fa-user in diğerlerine nazaran yükseklik olarak büyük olması yada fa-user'e özellikle müdahele eden başka bir css var.

Örnek olarak şöyle bir şey hazırladım ; http://jsfiddle.net/0s1acryj/

(Muhtemelen senin çözümün width-height değeri belirlemek olacak)

24.09.2019 10:12

#6

Daryl Full-Stack Web Developer Kullanıcı

Üyelik 11.11.2013
Yaş/Cinsiyet 29 / E
Meslek Web Geliştirici
Konum Antalya

Ad Soyad A** Ç**
Mesajlar 156
Beğeniler 43 / 64
Ticaret 0, (%0)

Sabit width height verip, dikeyde ve yatayda ortalarsan sorunun çözülmüş olur.

PHP • HTML • CSS • JAVASCRIPT • WORDPRESS İşleriniz Yapılır [ Uygun Fiyat + 9 Yıllık Tecrübe ]

24.09.2019 19:18

#7

wpuzman WordPress Developer Kullanıcı

Üyelik 13.01.2017
Yaş/Cinsiyet 33 / E
Meslek Yazılım
Konum Trabzon

Ad Soyad B** M**
Mesajlar 2771
Beğeniler 293 / 949
Ticaret 33, (%100)

Öncelikle display: inline-block vermelisiniz. Daha sonra width, height, ve line-height değerleri aynı olmalı.

https://jsfiddle.net/8tLzxsem/

Udemy Wordpress Tema Yapımı Kursum

24.09.2019 20:01

#8

BeycanDeveloper Web developer Kullanıcı

Üyelik 09.05.2019
Yaş/Cinsiyet 24 / E
Meslek Web developer
Konum Balıkesir

Ad Soyad H** B**
Mesajlar 239
Beğeniler 49 / 22
Ticaret 1, (%100)

wp uzman hocam benden önce yazmış ama bende yazmak istiyorum sorun olmazsa i lere width height line-height ve text-align center verirsen sorunu çözeceğini düşünüyorum

Hadi canım!

font awesome - CSS ile border vermek

Üye Girişi Yap