{"id":122944,"date":"2022-02-13T11:05:31","date_gmt":"2022-02-13T10:05:31","guid":{"rendered":"https:\/\/de.wordpress.org\/support\/topic\/divi-fontawsome-icons-css-content-attribut\/"},"modified":"2022-02-13T11:05:31","modified_gmt":"2022-02-13T10:05:31","slug":"divi-fontawsome-icons-css-content-attribut","status":"publish","type":"topic","link":"https:\/\/de.wordpress.org\/support\/topic\/divi-fontawsome-icons-css-content-attribut\/","title":{"rendered":"Divi – Fontawsome – Icons – CSS content Attribut"},"content":{"rendered":"

Hallo zusammen,<\/p>\n

meinem Verst\u00e4ndnis nach kann man zus\u00e4tzlich zu den 4 im Divi-Theme vorgesehenen Social-Icons (FB, Twitter, Insta, RSS) auch eigene hinzuf\u00fcgen. Erg\u00e4nzung der social_icons.php durch einen weiteren Listeneintrag mit entsprechender Klasse.<\/p>\n

Problem 1: das allein klappt bei mir nicht. Offenbar ist das zugeh\u00f6rige Style-Sheet nicht eingebunden. Wenn ich n\u00e4mlich (das aber unter https:\/\/comedyforfutrefestival.de<\/a>) dort in „Custom CSS“ notiere: <\/p>\n

.et-social-youtube a.icon:before { content: '\\e0a3'; }<\/code><\/p>\n

Wird mir das Youtube-Icon angzeigt. <\/p>\n

So wie ich es mittlerweile verstehe, wird der Liste dort irgendwie die oder „eine“ „fa-brands.svg“ zugeordnet und der Hex-Code im Content referenziert eines der „Glypt“-Elemente dort. <\/p>\n

Problem 2.: LinkedIn erwische ich dort nicht. <\/p>\n

Komisch dabei: in der Vorschau wird es mir korrekt angezeigt ;-). <\/p>\n

.et-social-linkedin a.icon:before { content: '\\e09d'; }<\/code><\/p>\n

Das f\u00fchrte dazu, dass Chrome, Opera und Firefox jeweils an anderes Logo angzeigt haben \ud83d\ude09 <\/p>\n

Als Workarround habe ich mir jetzt die SVGs von Xing und LinkedIn in den Ordner Uploads gepackt, diese auf 20px H\u00f6he ge\u00e4ndert und dann eingebunden mit Custom-CSS:<\/p>\n

<\/code>.et-social-linkedin a.icon:before {
\ncontent: url(https:\/\/nu17.de\/wp-content\/uploads\/2022\/02\/linkedin-icon-1.svg);
\n}
\n.et-social-xing a.icon:before {
\ncontent: url(https:\/\/nu17.de\/wp-content\/uploads\/2022\/02\/xing-logo-svgrepo-com.svg);
\n}<\/code><\/p>\n

Fragen tue ich mich, wie ich herausbekomme, welches SVG von Font-Awsome eingebunden wird, wie ich da die gew\u00fcnschten Logos direkt draus ziehen kann und\/oder wie ich herausbekomme, welche H\u00f6he die Font-Awsome-Logos in der Fu\u00dfzeile haben, damit ich wei\u00df, ob ich mit den 20px richtig liege \ud83d\ude09<\/p>\n

Dank und Gru\u00df,<\/p>\n

Robert aka dudada<\/p>\n","protected":false},"template":"","class_list":["post-122944","topic","type-topic","status-publish","hentry","topic-tag-content","topic-tag-css","topic-tag-divi","topic-tag-fontawsome","topic-tag-social-icons"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/de.wordpress.org\/support\/wp-json\/wp\/v2\/topic\/122944","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/de.wordpress.org\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/de.wordpress.org\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":0,"href":"https:\/\/de.wordpress.org\/support\/wp-json\/wp\/v2\/topic\/122944\/revisions"}],"wp:attachment":[{"href":"https:\/\/de.wordpress.org\/support\/wp-json\/wp\/v2\/media?parent=122944"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}