Hi, ich habe mir 2 Icons zusäzlich in die Shopware fonts eingebaut. Das habe ich irgendwie mit fontforge hinbekommen und die Browser zeigen das auch alle an. Jetzt habe ich natürlich an den Core Dateien gebastelt was man ja eigentlich nicht macht. Daher meine Frage, wie binde ich meine modifizierten Schriften updatesafe in das Template ein? Einfach in den eigenen Theme Ordner kopieren? Dabei noch eine weitere Frage: Ich habe ebenfalls die themes/Frontend/Responsive/frontend/_public/src/less/_components/icon-set-less angefasst. Die Änderungen müsste ich natürlich auch updatesicher unterbringen. Soll ich hier auch einfach die Datei in den eigenen Ordner kopieren? Dazu noch folgendes in der icon-set.less steht zu Beginn folgendes [code] * Icon set ============================================ ######Shopware Icon set elements Accessable with the i element and the icon-- class. Example: `` ```
|
icon–percent2 |
icon–percent |
icon–coupon |… [/code] Was soll denn diese Tabelle? Muss man hier überhaupt seine Icons eintragen (ich habe es halt gemacht, hat aber für mich mit css nix zu tun. Sieht eben aus wie eine einfach Tabelle mit der man sich die Icons anzeigen lassen könnte…
Also, das oben habe ich wieder verworfen, weil mit den Core-Dateien rumzupfuschen ist sicher suboptimal. Stattdessen wollte ich meine eigenen Icons in einer eigenen Font integrieren. Dazu habe ich im Netz folgenden Dienst gefunden, der schon mal diesen Schritt ziemlich vereinfacht http://fontastic.me/ Damit habe ich nun meine eigene Icon-Font erstellt und in den Custom Theme Fonts Ordner gepackt. Dann habe ich im Ordner themes/Frontend/Mein_theme/frontend/_public/src/less/_components eine Datei custom_icons.less mit folgendem Inhalt erstellt: @font-face { font-family: 'custom\_icons'; src:url('@{font-directory}/custom\_icons.eot?@{shopware-revision}'); src:url('@{font-directory}/custom\_icons.eot?#@{shopware-revision}') format('embedded-opentype'), url('@{font-directory}/custom\_icons.woff?@{shopware-revision}') format('woff'), url('@{font-directory}/custom\_icons.ttf?@{shopware-revision}') format('truetype'), url('@{font-directory}/custom\_icons.svg?@{shopware-revision}') format('svg'); font-weight: normal; font-style: normal; } [data-icon]:before { font-family: "custom\_icons" !important; content: attr(data-icon); font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [class^="icon-"]:before, [class\*=" icon-"]:before { font-family: "custom\_icons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-truck-right:before { content: "\e000"; } .icon-truck-left:before { content: "\e001"; } Diese Datei binde ich dann in meiner all.less mit @import “_components/custom_icons.less”; ein. Das klappt soweit, das Icon dass ich nutzen will wird dann mit angezeigt. Aber leider sind dann alle anderen Icons von Shopware weg. Was mache ich falsch?
Hab das übrigens gelöst. Das hier [class^="icon-"]:before, [class\*=" icon-"]:before { font-family: "custom\_icons" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ergab wohl eine Kollision mit den Icons von Shopware. Deshalb habe ich es aus der custom_icons.less entfernt. Mir reicht ja die data-icon Klasse. cheers