#1

inselpirat

Routinier  (482 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.ameland-tips.de

Vielleicht nutzt der eine oder andere die Icons auf seiner Webseite, ganz sicher diejenigen, welche das Bootstrap Design nutzen.

Die neuste Version 4.4 ist online und kann herunter geladen werden. 66 neue Icons stehen zur Verfügung.

Hier schauen

Nicht vergessen die entsprechenden Dateien auszutauschen, style.css und im Ordner css/fontawesome.css anpassen.

VG

 

 

#2

Volker W.

Administrator  (7794 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.warmers.de  ·   vwarmers  ·   vwarmers  ·   volkerw68

Danke für den Hinweis, Michael.

Den Einbau überlasse ich aber dem "Master of Disaster" (Thomas) für die kommenden Updates der drei Bootstrap Designs (Web/Shop/Pro). Ich persönlich brauche nämlich eher keines der 66 neuen Icons.

Aber gut zu wissen, daß da entwicklerseitig kein Stillstand herrscht. ;-)


Viele Grüße,
Volker

Über mich  ·  Volker W. Musik & Sounds  ·  Facebook  ·  Twitter  ·  Instagram  ·  StayFriends  ·  LinkedIn  ·  XING

#3

ofensepp

Forum-Sponsor  (429 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.ebersberger-forst.com

Hallo,

versuch schon eine zeitlang diese Dinger aufzurufen, nur weis ich nicht wo. Ich habe das responsive Pro Web Design Vertikal von Thomas. Sind die da schon mit drin?
Ich will dieses Spinner Icon für einen Link nutzen aber ich stell mich so was von an, furchtbar. Kann mir da wer schreiben wo es lang geht? Antwort Thomas ist schon klar, nur der hat auch WE. Meinte da eher einen freiwilligen mit mehr Ahnung wie ich.
VG Franz

#4

Volker W.

Administrator  (7794 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.warmers.de  ·   vwarmers  ·   vwarmers  ·   volkerw68

#5

ofensepp

Forum-Sponsor  (429 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.ebersberger-forst.com

Hallo Volker,

genau das ist es. Nur wie bring ich das rein? Als ich in der Schule war gabs kein englisch.

VG Franz

#6

Volker W.

Administrator  (7794 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.warmers.de  ·   vwarmers  ·   vwarmers  ·   volkerw68

#7

Volker W.

Administrator  (7794 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.warmers.de  ·   vwarmers  ·   vwarmers  ·   volkerw68

Bist Du weiter gekommen? Die Integration eines Codes von der o.g. Beispielseite wie z.B.

<i class="fa fa-spinner fa-pulse"></i>

via HTML-Absatz sollte ja nicht schwierig sein.


Schaue mal HIER. In dem Beispiel habe ich den HTML-Code

<i class="fa fa-spinner fa-pulse" style="color: #505050; font-size: 72px;"></i>

verwendet.


Viele Grüße,
Volker

Über mich  ·  Volker W. Musik & Sounds  ·  Facebook  ·  Twitter  ·  Instagram  ·  StayFriends  ·  LinkedIn  ·  XING

#8

Thomas

Moderator  (2298 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://siquando-designs.de

Hallo Franz,

im Vertika Pro Layout (wie auch in den anderen Designs von mir) wurden die standardmäßigen Bootstrap-Icons Glyphicons durch Font Awesome Icons ersetzt. Sie sind also bereits integriert und können beispielsweise in den Seiten Überschriften oder auch in den Texten der Slideshow eingefügt werden (siehe Vertika Pro Demo Feedback Verlinkung). Im Demo Beispiel lautet die Überschrift Feedback <i class="fa fa-comments-o"></i>

 Icons in Menü


Viele Grüße
Thomas

siquando-designs.de (NEU: KARO Flex Layout, Santa Cruz Pro für Pro Shop und Apollon 11 für Siquando Shop, Templateübersicht & Support für Shop 11 + Pro Web 8)

#9

ofensepp

Forum-Sponsor  (429 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://www.ebersberger-forst.com

Hallo,

erst mal danke an euch zwei.
Im normalen Bootstra3 von Thomas wird, wenn ich im Textfeld einen externen Link einfüge, das im Quelltext ausgegeben:
<a  title="Riem Arcaden" href="http://www.riem-arcaden.de/" target="_blank" >Riem Arcaden <i class="fa fa-link"></i></a>

wie kriege ich das bei den zwei ProWeb Designs hin? Da kann man ja auch im Textfeld einen Link einfügen. Der ist halt farbig, allerdings ohne Symbol:

VG Franz


Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »ofensepp« (10.11.2015, 19:11)
#10

Thomas

Moderator  (2298 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://siquando-designs.de

Bei den Pro Web Layouts Vertika oder Bootstrap 3 müssen für eine automatische Darstellung von Icons nach dem Text des Linkes zwei Dateien angepasst werden. Zum einem „muss” am Ende der Datei css.tpl (/classes/plugins/ngpluginlayout/styles/bootstrap/tpl/css.tpl für das Bootstrap Layout und /classes/plugins/ngpluginlayout/styles/vertika/tpl/css.tpl für das Vertika Layout) zusätzlich

1
2
3
4
5
6
7
8
9
10
.prolink {
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	margin-left: .33em;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transform: translate(0, 0);
}

eingefügt werden.

 

Außerdem muss die Datei \classes\util\ngrichtext.php angepasst werden. Hier musst du nach

35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
		if ($links != null) {
 
			foreach ( $links as $link ) {
				/* @var $link DOMElement */
				$this->link->parseURL ( $link->getAttribute ( 'href' ) );
				$link->setAttribute ( 'href', $this->link->getURL () );
 
				if ($this->link->linkType == NGLink::LinkPicture) {
					$link->setAttribute ( 'class', 'gallery' );
				} else if ($this->link->linkType == NGLink::LinkPagePopup || $this->link->linkType == NGLink::LinkTopicPopup) {
					$link->setAttribute ( 'class', 'galleryiframe' );
				} else if ($this->link->linkType == NGLink::LinkWWW) {
					$link->setAttribute ( 'target', '_blank' );
				}
			}
		}

suchen, und den kompletten Bereich durh folgenden PHP-Code ersetzen:

35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
		if ($links != null) {
 
			foreach ( $links as $link ) {
				/* @var $link DOMElement */
				$this->link->parseURL ( $link->getAttribute ( 'href' ) );
				$link->setAttribute ( 'href', $this->link->getURL () );
				$space = $this->doc->createTextNode('');
				$icon = $this->doc->createElement("span");
				$icon->appendChild ($space);
 
				if ($this->link->linkType == NGLink::LinkPicture) {
					$icon->setAttribute ('class', 'prolink fa-picture-o');	
					$link->appendChild ($icon);
					$link->setAttribute ( 'class', 'gallery' );
				} else if ($this->link->linkType == NGLink::LinkPagePopup || $this->link->linkType == NGLink::LinkTopicPopup) {
					$icon->setAttribute ('class', 'prolink fa-link');
					$link->appendChild ($icon);
					$link->setAttribute ( 'class', 'galleryiframe' );
				} else if ($this->link->linkType == NGLink::LinkWWW) {
					$link->setAttribute ( 'target', '_blank' );
					$icon->setAttribute ('class', 'prolink fa-globe');
					$link->appendChild ($icon);
				} else if ($this->link->linkType == NGLink::LinkMailTo) {
					$icon->setAttribute ('class', 'prolink fa-envelope');
					$link->appendChild ($icon);
				} else if ($this->link->linkType == NGLink::LinkPage) {
					$icon->setAttribute ('class', 'prolink fa-link');
					$link->appendChild ($icon);
				} else if ($this->link->linkType == NGLink::LinkTopic) {
					$icon->setAttribute ('class', 'prolink fa-link');
					$link->appendChild ($icon);
				} else if ($this->link->linkType == NGLink::LinkDownload) {					
					$icon->setAttribute ('class', 'prolink fa-download');
					$link->appendChild ($icon);
				}
			}
		}

Hier ein Beispieltext mit Bild-, Download- und WWW-Verlinkung.

 Link mit Font-Awesome Icons


Viele Grüße
Thomas

siquando-designs.de (NEU: KARO Flex Layout, Santa Cruz Pro für Pro Shop und Apollon 11 für Siquando Shop, Templateübersicht & Support für Shop 11 + Pro Web 8)

1865 Aufrufe | 10 Beiträge