Simgeler web sitenize nas\u0131l eklenir?<\/h3>\n
Web sitenize sosyal medya simgeleri eklemenin \u00e7e\u015fitli yollar\u0131 vard\u0131r:<\/p>\n
- \n
- \n
Resim olarak simgeleri .png, .svg veya .eps gibi istenen bi\u00e7imde ekleyin<\/p>\n<\/li>\n
- \n
FontAwesome, Glyphicons simge yaz\u0131 tiplerini kullanarak ekleyin<\/p>\n<\/li>\n
- \n
WP widget'\u0131n\u0131 kullanarak simgeleri uygulay\u0131n<\/p>\n<\/li>\n
- \n
WP eklentisi ile sosyal medya simgeleri<\/a> ekleyin<\/p>\n<\/li>\n<\/ul>\n
En uygun olan\u0131 se\u00e7ebilir veya hepsini deneyebilirsiniz.<\/p>\n
Resim olarak sosyal simgeleri ekleme (PNG, SVG, EPS, vb.)<\/h3>\n
Bir tasar\u0131mc\u0131 iseniz, simgeleri kendinize olu\u015fturabilir veya \u00f6zelle\u015ftirebilirsiniz. Ama de\u011filseniz veya sadece zaman kazanmak istiyorsan\u0131z, simge paketlerini se\u00e7ebilece\u011finiz ve indirebilece\u011finiz bir\u00e7ok hizmeti kullanabilirsiniz. En pop\u00fcler olanlar\u0131:<\/p>\n
Vecteezy<\/a><\/h3>\n
![\"\"](\"https:\/\/www.templatemonster.com\/blog\/tr\/wp-content\/uploads\/2018\/12\/vecteezy01.png\")
<\/a><\/p>\nGereksinimlerinize en uygun olan simge paketini se\u00e7in ve indirin.<\/p>\n
Ard\u0131ndan dosyalar\u0131 medya kitapl\u0131\u011f\u0131na y\u00fckleyin ve bunlar\u0131 a\u015fa\u011f\u0131daki \u015fekilde ekleyin (HTML web siteleri i\u00e7in):<\/p>\n
\n<ul class=\"social-icons\">\r\n <li><a href=\"http:\/\/www.facebook.com\"><img src='path_to_your_image' \/><\/a><\/li>\r\n <li><a href=\"http:\/\/www.twitter.com\"><img src='path_to_your_image' \/><\/a><\/li>\r\n <li><a href=\"http:\/\/www.youtube.com\"><img src='path_to_your_image' \/><\/a><\/li>\r\n<\/ul>\r\n<\/pre>\n<\/div>\n
Simgelerin boyutunu ve konumunu ayarlamak i\u00e7in stil ekleyin:<\/p>\n
.social-icons {\r\n text-align: center;\r\n } \r\n.social-icons li {\r\n display:inline-block;\r\n list-style-type:none;\r\n -webkit-user-select:none;\r\n -moz-user-select:none;\r\n }\r\n.social-icons li a {\r\n border-bottom: none;\r\n }\r\n.social-icons li img {\r\n width:70px;\r\n height:70px;\r\n margin-right: 20px;\r\n}<\/pre>\n![\"\"](\"https:\/\/www.templatemonster.com\/blog\/tr\/wp-content\/uploads\/2018\/12\/social-media-pack-bundle.png\")
<\/a><\/h3>\nFlaticon<\/a><\/h3>\n
![\"\"](\"https:\/\/www.templatemonster.com\/blog\/tr\/wp-content\/uploads\/2018\/12\/flaticon01.png\")
<\/a><\/p>\nSimgeleri koleksiyonunuza ekleyin, onlar\u0131 indirin ve bunlar\u0131 kodunuza dahil edin<\/p>\n
IconFinder<\/a><\/h3>\n
![\"\"](\"https:\/\/www.templatemonster.com\/blog\/tr\/wp-content\/uploads\/2018\/12\/iconfinder01.png\")
<\/a><\/p>\nBurada da bir\u00e7ok \u00fccretsiz sosyal simge paketi bulabilirsiniz. Zevkinize uygun stili bulun, bunlar\u0131 sosyal blo\u011funuza ekleyin ve sosyal a\u011flarda artan pop\u00fclerli\u011fin tad\u0131n\u0131 \u00e7\u0131kar\u0131n! Sosyal simgeleri SVG g\u00f6r\u00fcnt\u00fcleri olarak uygulaman\u0131n bir yolu var.<\/p>\n
Bunlar\u0131 nas\u0131l \u00f6zelle\u015ftirebilece\u011finizi g\u00f6rmek i\u00e7in a\u015fa\u011f\u0131daki \u00f6rneklere bak\u0131n:<\/p>\n
\n
\n
Simge yaz\u0131 tipi olarak Sosyal simgeleri ekleme<\/h3>\n
FontAwesome<\/a><\/h3>\n
FontAwesome, g\u00fcn\u00fcm\u00fczde muhtemelen en pop\u00fcler simge yaz\u0131 tipidir. Uygulanmas\u0131 ve kullan\u0131lmas\u0131 \u00e7ok kolay. Bir \u00f6rne\u011fe bakal\u0131m.<\/p>\n
\u015eu kodu HTML\u2019nize ekleyin:<\/p>\n
<link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.7.0\/css\/font-awesome.min.css\">\r\n<div class=\"wrapper\">\r\n <a target=\"_blank\" href=\"your_url_here\"><i class=\"fa fa-3x fa-google-plus\"><\/i><\/a>\r\n <a target=\"_blank\" href=\"your_url_here\"><i class=\"fa fa-3x fa-facebook-square\"><\/i><\/a>\r\n <a target=\"_blank\" href=\"your_url_here\"><i class=\"fa fa-3x fa-twitter-square\"><\/i>\r\n<\/div><\/a><\/pre>\n
Stilleri style.css dosyan\u0131za ekleyin ( kendi ekleyebilir veya bu \u00f6rne\u011fi kullanabilirsiniz):<\/p>\n
body {\r\n text-align: center;\r\n}\r\n.wrapper {\r\n display: inline-flex;\r\n justify-content: center;\r\n}\r\n.wrapper i {\r\n padding: 10px;\r\n text-shadow: 0px 6px 8px rgba(0, 0, 0, 0.6);\r\n transition: all ease-in-out 150ms;\r\n}\r\n.wrapper a:nth-child(1) {\r\n color: #dd4b39;\r\n}\r\n.wrapper a:nth-child(2) {\r\n color: #4867AA;\r\n}\r\n.wrapper a:nth-child(3) {\r\n color: #1DA1F2;\r\n}\r\n.wrapper i:hover {\r\n margin-top: -3px;\r\n text-shadow: 0px 14px 10px rgba(0, 0, 0, 0.4);\r\n}<\/pre>\nVe i\u015fte b\u00f6yle \u00e7al\u0131\u015f\u0131r:<\/p>\n
\n
Bu arada, FontAwesome Cheatsheet<\/a>'deki di\u011fer t\u00fcm simgeleri bulabilirsiniz<\/p>\n
Uygulama \u00f6rnekleri:<\/p>\n
\n
\n
\n
![\"\"](\"https:\/\/www.templatemonster.com\/blog\/tr\/wp-content\/uploads\/2018\/12\/icon-sets.png\")
<\/a><\/p>\nSocicon<\/a><\/h3>\n
Socicon simge yaz\u0131 tipi kullanman\u0131n ba\u015fka bir yolu<\/p>\n
01 Web sitesine git:<\/p>\n
![\"\"](\"https:\/\/www.templatemonster.com\/blog\/tr\/wp-content\/uploads\/2018\/12\/socicon01.png\")
<\/a><\/p>\n