Liste nutzbarer Visforms Icon

MaliRaj
Autor
Offline

Mehr

1 Jahr 4 Monate her #9609 von MaliRaj

Liste nutzbarer Visforms Icon wurde erstellt von MaliRaj

Hallo Aicha, Hallo Ingmar!
Gibt es eigentlich eine Liste der nutzbaren visicon-xyz? Ich suche gerade ein Haus/Home-Icon, welches ich einfach über class einbinden kann. Ich nutze Bootstrap 5. Git es da schon Icon-Klassen?
bekannt sind: -eye, -publish, -unpublish, -edit

Freundliche Grüße aus PM
Heinz
(Joomla 5.1.2 / Visforms+Subscription 5.12 / PHP 8.2)

Administrator AV
Offline

Mehr

1 Jahr 4 Monate her #9610 von Administrator AV

Administrator AV antwortete auf Liste nutzbarer Visforms Icon

Hallo Heinz,
die visIcon Font besteht aus 16 Icons.
visicon-user
visicon-users
visicon-cog
visicon-cogs
visicon-bin
visicon-menu
visicon-unpublish
visicon-publish
visicon-filter
visicon-search
visicon-arrow-up-3
visicon-arrow-down-3
visicon-edit
visicon-calendar
visicon-download
visicon-eye

[url] vi-solutions.de/forum-uploads/visicon.png [/url]

Liebe Grüße,
Aicha

I recommend you the new and up-to-date documentation for Joomla 4:
docs.joomla-5.visforms.vi-solutions.de/en/docs/
Most of this also applies retrospectively to Joomla 3.
Please only ask 1 question per topic :-)

Ich empfehle Dir die neue und aktuelle Dokumentation für Joomla 4:
docs.joomla-5.visforms.vi-solutions.de/docs/
Das meiste gilt rückwirkend auch für Joomla 3.
Bitte immer nur 1 Frage pro Thema stellen :-)

Folgende Benutzer bedankten sich: MaliRaj

MaliRaj
Autor
Offline

Mehr

1 Jahr 4 Monate her #9612 von MaliRaj

MaliRaj antwortete auf Liste nutzbarer Visforms Icon

Vielen Dank Aicha, auch für diese tolle png-Übersicht.

Freundliche Grüße aus PM
Heinz
(Joomla 5.1.2 / Visforms+Subscription 5.12 / PHP 8.2)

Administrator AV
Offline

Mehr

1 Jahr 4 Monate her #9613 von Administrator AV

Administrator AV antwortete auf Liste nutzbarer Visforms Icon

Hallo Heinz,

Noch ein Nachtrag.

Alle Icons sind soweit ich das sehe aktuell nur in der visdata.css eingebunden.
D.h. in den Datenansichten stehen sie alle automatisch zur Verfügung.

Im CSS, das für das Formular geladen wird stehen, soweit ich das sehe, aktuell nur folgende Icon zur Verfügung.
visicon-arrow-up-3
visicon-arrow-down-3
visicon-edit:before
visicon-calendar
visicon-download
visicon-eye

Das vollständige CSS um die visIcon verwenden zu können sieht so aus.

Code:

@font-face {
    font-family: 'visIcon';
    src:  url('../fonts/visIcon.eot?ale3iy');
    src:  url('../fonts/visIcon.eot?ale3iy#iefix') format('embedded-opentype'),
    url('../fonts/visIcon.ttf?ale3iy') format('truetype'),
    url('../fonts/visIcon.woff?ale3iy') format('woff'),
    url('../fonts/visIcon.svg?ale3iy#visIcon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="visicon-"], [class*=" visicon-"] {
    font-family: 'visIcon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[class^="visicon-"],
[class*=" visicon-"] {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: .3em;
    line-height: 14px;
}
[class^="visicon-"]:before,
[class*=" visicon-"]:before {
    font-family: 'visIcon';
    font-style: normal;
    speak: none;
}
[class^="visicon-"].disabled,
[class*=" visicon-"].disabled {
    font-weight: normal;
}

.visicon-user:before {
    content: "\e971";
}
.visicon-users:before {
    content: "\e972";
}
.visicon-cog:before {
    content: "\e994";
}
.visicon-cogs:before {
    content: "\e995";
}
.visicon-bin:before {
    content: "\e9ac";
}
.visicon-menu:before {
    content: "\e9bd";
}
.visicon-unpublish:before {
    content: "\ea0f";
}
.visicon-publish:before {
    content: "\ea10";
}
.visicon-filter:before {
    content: "\ea5b";
}
.visicon-search:before {
    content: "\e986";
}
.visicon-arrow-up-3:before {
    content: "\e600";
}
.visicon-arrow-down-3:before {
    content: "\e601";
}
.visicon-edit:before {
    content: "\e602";
}
.visicon-calendar:before {
    content: "\e603";
}
.visicon-download:before {
    content: "\e604";
}
.visicon-eye:before {
    content: "\e9ce";
}

Falls Icons nicht kommen, müsstest du die fehlenden Teile gegebenfalls per custom CSS einfügen.
Damit dies in Zukunft nicht mehr nötig ist:

Ich habe dazu einen Issue zur Entwicklung für die Wunschliste angelegt:
Issue [VF-873]: Include visIcon CSS in all Visforms Frontend Views

Wenn wir das neue Feature releasen, wirst du explizit über das Release hier im Thema informiert.
Vielen Dank nochmal für deinen Vorschlag!

Herzliche Grüße,
Aicha