{"id":577,"date":"2022-08-20T20:05:52","date_gmt":"2022-08-20T18:05:52","guid":{"rendered":"https:\/\/www.penzenauer.at\/blog\/?p=577"},"modified":"2023-06-12T18:35:07","modified_gmt":"2023-06-12T16:35:07","slug":"wordpress-divi-xing-icon","status":"publish","type":"post","link":"https:\/\/www.penzenauer.at\/blog\/wordpress-divi-xing-icon\/","title":{"rendered":"WordPress Divi: Xing Icon"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8220;1&#8243; admin_label=&#8220;section&#8220; _builder_version=&#8220;4.16&#8243; custom_padding=&#8220;0px||0px||false|false&#8220; global_colors_info=&#8220;{}&#8220;][et_pb_row admin_label=&#8220;row&#8220; _builder_version=&#8220;4.16&#8243; background_size=&#8220;initial&#8220; background_position=&#8220;top_left&#8220; background_repeat=&#8220;repeat&#8220; global_colors_info=&#8220;{}&#8220;][et_pb_column type=&#8220;4_4&#8243; _builder_version=&#8220;4.16&#8243; custom_padding=&#8220;|||&#8220; global_colors_info=&#8220;{}&#8220; custom_padding__hover=&#8220;|||&#8220;][et_pb_text admin_label=&#8220;Text&#8220; _builder_version=&#8220;4.21.0&#8243; background_size=&#8220;initial&#8220; background_position=&#8220;top_left&#8220; background_repeat=&#8220;repeat&#8220; hover_enabled=&#8220;0&#8243; global_colors_info=&#8220;{}&#8220; sticky_enabled=&#8220;0&#8243;]<\/p>\n<p>kurzem musste ich bei einem Kunden in der oberen Leiste (Sekund\u00e4rmen\u00fc) ein Xing-Icon zur Verf\u00fcgung stellen. Leider wird das Xing-Icon von der Schrift, die Elegant Themes f\u00fcr die Icons verwendet, nicht zur Verf\u00fcgung gestellt.<\/p>\n<p>Eine M\u00f6glichkeit das zu l\u00f6sen ist, sich einen anderen Webfont zu suchen der das Icon hat, und diesen Font f\u00fcr die Darstellung des Xing-Icons zu verwenden.<\/p>\n<p>Das wird auch hier so beschrieben: <a href=\"https:\/\/webdevtrust.com\/xing-social-icon-font-divi\/\" target=\"_blank\" rel=\"noopener\" title=\"Artikel lesen\">https:\/\/webdevtrust.com\/xing-social-icon-font-divi\/<\/a><\/p>\n<p>Folgende Vorgehensweise habe ich dann anhand dieses Beitrags gew\u00e4hlt:<\/p>\n<ul>\n<li>Download des gew\u00fcnschten Icons (gratis Set) \u00fcber die <a href=\"https:\/\/icomoon.io\/app\/#\/select\" target=\"_blank\" rel=\"noopener\" title=\"Zur Icon Moon App\">Icon Moon App<\/a>.<\/li>\n<li>Entpacken der downgeloadeten Daten in einen eigenen Ordner &#8222;fonts&#8220; auf dem Webserver (oberste Ebene).<\/li>\n<li>Aktivieren der Social Media Icons im sekund\u00e4ren Men\u00fc \u00fcber den Theme Customizer.<\/li>\n<li>Erg\u00e4nzen der Icons (in meinem Fall Facebook und Twitter) und Angabe der entsprechenden Links in den Divi Theme Options.<\/li>\n<li>Ebenda erg\u00e4nzen des folgenden CSS-Codes:\n<pre>\/*Xing statt Twitter*\/\n@font-face {\nfont-family: 'xing';\nfont-style: normal;\nfont-weight: 400;\nsrc: url('..\/fonts\/icomoon.eot'); \/* IE9 Compat Modes *\/\nsrc: local(''),\nurl('..\/fonts\/icomoon?#iefix') format('embedded-opentype'), \/* IE6-IE8 *\/\nurl('..\/fonts\/icomoon.woff') format('woff'), \/* Modern Browsers *\/\nurl('..\/fonts\/icomoon.ttf') format('truetype'), \/* Safari, Android, iOS *\/\nurl('..\/fonts\/icomoon.svg#xing') format('svg'); \/* Legacy iOS *\/\n}\n.et-social-twitter a:before {font-family:xing!important;}\n.et-social-twitter a.icon:before {content: \"\\ead4\";}<\/pre>\n<p>&nbsp;<\/p>\n<\/li>\n<\/ul>\n<p>Mit dem CSS-Code wird die Schrift, die man auf den Webserver gespeichert hat, zun\u00e4chst aufgerufen und bekommt den Namen &#8222;xing&#8220;. Anschlie\u00dfend wird dem Twitter Icon die entsprechende Font-Family daf\u00fcr zugewiesen und die Symbolnummer zugewiesen (erh\u00e4lt man aus der Icon Moon App).<\/p>\n<p>Et voil\u00e1, schon hat man auch das Xing-Icon auf der Webseite.<\/p>\n<p>P.S: Eine Leserin hat mich darauf hingewiesen, dass nicht alle Icon Sets der Moon App gratis sind und mir noch folgende Quelle genannt: <a href=\"https:\/\/www.websiteplanet.com\/blog\/free-icons-for-commercial-use\/\" target=\"_blank\" rel=\"noopener\" title=\"Weitere Quellen f\u00fcr Icons\">https:\/\/www.websiteplanet.com\/blog\/free-icons-for-commercial-use\/<\/a> Einige der Quellen sind zwar Bilder, aber dennoch vielen Dank daf\u00fcr!<\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8220;4.9.4&#8243; _module_preset=&#8220;default&#8220; global_module=&#8220;272&#8243; global_colors_info=&#8220;{}&#8220;][et_pb_column type=&#8220;4_4&#8243; _builder_version=&#8220;4.16&#8243; _module_preset=&#8220;default&#8220; global_colors_info=&#8220;{}&#8220;][et_pb_post_nav prev_text=&#8220;Vorheriger Artikel&#8220; next_text=&#8220;N\u00e4chster Artikel&#8220; _builder_version=&#8220;4.16&#8243; _module_preset=&#8220;default&#8220; title_text_color=&#8220;#FFFFFF&#8220; background_color=&#8220;#2E4770&#8243; custom_padding=&#8220;0.5em|0.5em|0.5em|0.5em|true|true&#8220; global_colors_info=&#8220;{}&#8220;][\/et_pb_post_nav][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>kurzem musste ich bei einem Kunden in der oberen Leiste (Sekund\u00e4rmen\u00fc) ein Xing-Icon zur Verf\u00fcgung stellen. Leider wird das Xing-Icon von der Schrift, die Elegant Themes f\u00fcr die Icons verwendet, nicht zur Verf\u00fcgung gestellt. Eine M\u00f6glichkeit das zu l\u00f6sen ist, sich einen anderen Webfont zu suchen der das Icon hat, und diesen Font f\u00fcr die [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":76,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"aside","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"795","footnotes":""},"categories":[21],"tags":[32,60,58],"class_list":["post-577","post","type-post","status-publish","format-aside","has-post-thumbnail","hentry","category-aus-meiner-arbeit","tag-css","tag-divi","tag-wordpress","post_format-post-format-aside"],"_links":{"self":[{"href":"https:\/\/www.penzenauer.at\/blog\/wp-json\/wp\/v2\/posts\/577","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.penzenauer.at\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.penzenauer.at\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.penzenauer.at\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.penzenauer.at\/blog\/wp-json\/wp\/v2\/comments?post=577"}],"version-history":[{"count":5,"href":"https:\/\/www.penzenauer.at\/blog\/wp-json\/wp\/v2\/posts\/577\/revisions"}],"predecessor-version":[{"id":605,"href":"https:\/\/www.penzenauer.at\/blog\/wp-json\/wp\/v2\/posts\/577\/revisions\/605"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.penzenauer.at\/blog\/wp-json\/wp\/v2\/media\/76"}],"wp:attachment":[{"href":"https:\/\/www.penzenauer.at\/blog\/wp-json\/wp\/v2\/media?parent=577"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.penzenauer.at\/blog\/wp-json\/wp\/v2\/categories?post=577"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.penzenauer.at\/blog\/wp-json\/wp\/v2\/tags?post=577"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}