Font Awesome Icons austauschen

Route 66 · 18. April 2015

Hi,

wie kann ich die Font Awesome Icons gegen eigene austauschen?

sofixleon · 18. April 2015

Zitat von Route 66

Font Awesome Icons

Welche meinst Du?

Hier mit eigenen Grafiken

CSS

/*BoardIcons*/
.wbbBoardContainer > .wbbBoard > .icon:before {
    background-image: url (@{style_image_path}/icon/boardM.png);
    content: "";
    display: block;
    height: 32px;
    width: 32px;
}
.wbbBoardContainer > .wbbBoard.new > .icon:before {
    background-image: url (@{style_image_path}/icon/boardNewM.png);
    content: "";
    display: block;
    height: 32px;
    width: 32px;
}
/*SubBoardIcons*/
.wbbBoardList .wbbSubBoards li > span.icon::before {
    background-image: url (@{style_image_path}/icon/boardS.png);
    content: "";
    display: block;
    height: 16px;
    width: 16px;
}
.wbbBoardList .wbbSubBoards li.new > span.icon::before {
    background-image: url (@{style_image_path}/icon/boardSnew.png);
    content: "";
    display: block;
    height: 16px;
    width: 16px;
}

Alles anzeigen

Und hier einmal mit anderen Font Awesome.

CSS

/*BoardIcons*/
.wbbBoard .icon-folder-close-alt:before {
    font-family: FontAwesome;
    font-size: 1.4rem!important;
    content: "\f07b"!important;
    position: relative;
}
.wbbBoard .icon-folder-close:before {
    font-family: FontAwesome;
    font-size: 1.4rem!important;
    content: "\f07b"!important;
    position: relative;
}
/*SubBoardsIcon*/
.wbbSubBoards .icon-folder-close-alt:before {
       font-family: FontAwesome;
       font-size: 1.4rem!important;
       content: "\f07b"!important;
       position: relative;
}
.wbbSubBoards .icon-folder-close:before {
       font-family: FontAwesome;
       font-size: 1.4rem!important;
       content: "\f07b"!important;
       position: relative;
}

Alles anzeigen

Route 66 · 18. April 2015

Hallo,

vielen Dank erst Mal!

Ich möchte z. B. diese Icons ändern:

Beim Deinem zweiten Beispiel haben sich einige Icons geändert.

Zum ersten Beispiel noch folgende Frage:

Wo liegt der @{style_image_path}?

Unter dem Verzeichnis des Stil?
Oder unter \htdocs\wbb41\wcf\icon?

Cr@@gle · 18. April 2015

@{style_image_path} = der eingestellte Stil-Ordner im Stil-Editor.

Route 66 · 2. Mai 2015

Hat alles so weit geklappt, vielen Dank!

Nur möchte ich auch gerne die Icons für das Teilen von "Facebook" "Google+" etc. austauschen. Nur dafür finde ich nichts !

Cr@@gle · 2. Mai 2015

CSS

/* Facebook */
.icon-facebook-sign:before, .fa-facebook-square:before {
    background-image: url (@{style_image_path}/icon/boardM.png);
    content: "";
    display: block;
    height: 32px;
    width: 32px;
}
/* Twitter */
.icon-twitter-sign:before, .fa-twitter-square:before {
    background-image: url (@{style_image_path}/icon/boardM.png);
    content: "";
    display: block;
    height: 32px;
    width: 32px;
}
/* Google */
.icon-google-plus-sign:before, .fa-google-plus-square:before {
    background-image: url (@{style_image_path}/icon/boardM.png);
    content: "";
    display: block;
    height: 32px;
    width: 32px;
}
/* Reddit */
.fa-reddit-square:before {
    background-image: url (@{style_image_path}/icon/boardM.png);
    content: "";
    display: block;
    height: 32px;
    width: 32px;
}

Alles anzeigen

Route 66 · 2. Mai 2015

Wie immer:

Perfekt!

Vielen Dank!!

Route 66 · 2. Mai 2015

Ääähhmmm eine Frage dazu hätte ich doch noch....

Kann ich die Position für das Icon "Einstellungen zum Teilen" ändern? Es steht ein paar Pixel zu hoch.

Social Media Icons.jpg

Cr@@gle · 2. Mai 2015

Wäre einfacher, wenn man den Link zur Live-Ansicht hätte.

Sollte ja eigentlich bei identischen Icon-Grafiken auch nicht notwendig sein, da manuell nachzuarbeiten.

Hast du auch bei allen diesen Icons die gleiche Höhe definiert?

Route 66 · 2. Mai 2015

Zugangsdaten gerade per Kon abgeschickt.

Ich habe die Höhen an sich nicht verändert. Auch mit dem originalen Zeichen aus der V-Collection von Black Rider sieht es genau so aus!

Font Awesome Icons austauschen

cls-design

Informationen

Demoinstallationen

Hilfe