phpBB.de • 3.2.1 Font awesome social share buttons

Seite 1 von 1

3.2.1 Font awesome social share buttons

Verfasst: 19.08.2017 16:28

von Tastenplayer

Mein Versuch die tas2580 Social Media Buttons Ext. durch Font awesome Icons - html code social share Links zu ersetzen ist bisher kläglich gescheitert

Heute andere Anleitung gefunden - jedoch es wird nichts angezeigt. Geht das im phpbb Forum überhaupt? Wenn es nicht geht, kann ich mir die Zeit weiterer Versuche ersparen.

Im Header soll man das einfügen:

Code: Alles auswählen

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Da wir im phpbb 3.2.1 ja bereits font awesome integriert haben - hatte ich zuerst im header nichts eingefügt.

Im Body soll man das einfügen:

Code: Alles auswählen

 <!-- Facebook -->
<a href="https://www.facebook.com/sharer/sharer.php?u=SHAREMESSAGE" title="Share on Facebook" target="_blank" class="btn btn-facebook"><i class="fa fa-facebook"></i> Facebook</a>
<!-- Google+ -->
<a href="https://plus.google.com/share?url=SHAREMESSAGE" title="Share on Google+" target="_blank" class="btn btn-googleplus"><i class="fa fa-google-plus"></i> Google+</a>
<!-- StumbleUpon -->

SHAREMESSAGE soll man durch die gewünschte URL ersetzen. Jedoch so wie ich das sehen müsste der Code im phpbb Forum anders eingefügt werden. So jedenfalls werden keine Button unter dem Statistikblock angezeigt.

Code: Alles auswählen

<!-- EVENT index_body_stat_blocks_after -->

<!-- Facebook -->
<a href="https://www.facebook.com/sharer/sharer.php?u=SHAREMESSAGE" title="Share on Facebook" target="_blank" class="btn btn-facebook"><i class="fa fa-facebook"></i> Facebook</a>
<!-- Google+ -->
<a href="https://plus.google.com/share?url=SHAREMESSAGE" title="Share on Google+" target="_blank" class="btn btn-googleplus"><i class="fa fa-google-plus"></i> Google+</a>

<!-- INCLUDE overall_footer.html -->

Jetzt wo es dunkler geworden ist habe ich gesehen, dass es sehr wohl angezeigt wird im Forum. Allerdings in der Footer Navbar über dem Foren-Übersicht-Link Statt zwischen Footer Navbar und Statistikblock Ext und nicht in Font Awesome Icons sondern mit dem Text( Facebook Google+)

Ich glaubs nicht, da muss es erst dunkel werden im Büro bis man sieht, dass es längst angezeigt wird noch eine kleine Korrektur in der overall_footer.html und siehe da [ externes Bild ] Nur müsste laut dieser Anleitung der Text nicht angezeigt werden? https://richonrails.com/articles/adding ... using-html (egal hauptsache es wird überhaupt was angezeigt

)

Jetzt müsste ich nur noch rausfinden, was ich in die Keyboard.css einfügen muss, damit man das bearbeiten kann. Sehr komisch mit diesem a class=.

Code: Alles auswählen

<a class="btn btn-facebook" href="https://www.facebook.com/sharer/sharer.php?u=https://www.facebook.com/Tastenworld/" title="Share on Facebook" target="_blank">
<a class="btn btn-googleplus" href="https://plus.google.com/share?url=https://plus.google.com/u/0/+MyTastenworldch" title="Share on Google+" target="_blank">
<a class="btn btn-youtube" href="https://www.youtube.com/user/9000PRO" title="My-Tastenworld on Youtube" target="_blank" data-placement="top">

Hat auch einigermassen geklappt - ausser dass ich bis jetzt nicht herausfand was ich machen muss, dass es in der Mitte angezeigt wird!
[ externes Bild ]

Code: Alles auswählen

a.btn.btn{
	font-weight: bold;
	font-size: 14px;
	color: #395F93;
	padding: 10px;
}

Oder mit Hintergrund [ externes Bild ]

Code: Alles auswählen

a.btn.btn{
	font-weight: bold;
	font-size: 13px;
	color: #CCAE71;
	padding: 5px;
	background-color: #000000;
	border: 3px solid #395F93;
	border-radius: 5px;
}

In der overall_header.html habe ich nichts eingefügt - respektive das nicht:

Code: Alles auswählen

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Jetzt wärs zwar mittig und die Buttons gleiche Formatierung wie bei den Foren - aber na ja [ externes Bild ]

Re: 3.2.1 Font awesome social share buttons

Verfasst: 20.08.2017 11:40

von Lehrling

Und wie lautet jetzt genau deine Frage? Sollen die Links im Header erscheinen?

Re: 3.2.1 Font awesome social share buttons

Verfasst: 20.08.2017 12:01

von Tastenplayer

Nein sie sollen da sein wo sie jetzt sind - jedoch mittig und nicht so weit auseinander.
Jedes Mal, wenn ich das versuche ist leider dann unten das Copyright kaputt! [ externes Bild ]

keyboard.css

Code: Alles auswählen

div.socialbuttons {
	padding-top: 10px;
	padding-bottom: 13px;
	text-align: center;
}
div.socialbuttons ul li {
	list-style: none;
	display: inline;
	background-repeat: no-repeat;
	background-position: left center;
	padding: 25px 0px 20px 58px;
}

index_body.html

Code: Alles auswählen

<!-- IF NEWEST_USER -->
	<div class="stat-block statistics">
		<h3>{L_STATISTICS}</h3>
		<p>
			<!-- EVENT index_body_block_stats_prepend -->
			{TOTAL_POSTS} &bull; {TOTAL_TOPICS} &bull; {TOTAL_USERS} &bull; {NEWEST_USER}
			<!-- EVENT index_body_block_stats_append -->
		</p>
	</div>	
<!-- ENDIF -->

</li>
	</ul>
	</div>
</div>
<div class="socialbuttons">
	<ul>
	<!-- Facebook -->
<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.forum.my-tastenworld.ch" title="Share on Facebook" target="_blank" class="btn btn-facebook"><i class="fa fa-facebook"></i> Facebook</a>
<!-- Google+ -->
<a href="https://plus.google.com/share?url=https%3A%2F%2Fwww.forum.my-tastenworld.ch&title=Foren-%C3%9Cbersicht" title="Share on Google+" target="_blank" class="btn btn-googleplus"><i class="fa fa-google-plus"></i> Google+</a>
<!-- Youtube -->
<a href="https://www.youtube.com/user/9000PRO" title="My-Tastenworld on Youtube" target="_blank" data-placement="top" class="btn btn-youtube"><i class="fa fa-youtube"></i> Youtube</a>
<!-- Paypal -->
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=tastenplayer%40bluewin%2ech&lc=CH&item_name=My%2dTastenworld%2ech&currency_code=EUR&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted" title="Paypal-Spende" target="_blank" class="btn btn-paypal"><i class="fa fa-flask"></i> Dukatentopf</a>
</ul>
</div><br />

<!-- EVENT index_body_stat_blocks_after -->

So wie es jetzt ist - schaffe ich es nicht, den Abstand zwischen den Buttons zu verkleinern!
[ externes Bild ]

keyboard.css

Code: Alles auswählen

a.btn.btn{
	font-weight: bold;
	font-size: 1em;
	color: #3d3d3d;
	padding: 3px;
	padding-top: 5px;
	background-color: #aeaeae;
    background-image: linear-gradient(to bottom, #f1f1f1 0%, #aeaeae 100%);
    background-image: -webkit-linear-gradient(top, #f1f1f1 0%,#aeaeae 100%);
    background-image: linear-gradient(to bottom, #f1f1f1 0%,#aeaeae 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#aeaeae',GradientType=0 );
	border: 2px solid #000000;
	border-radius: 5px;
	margin-left: 180px;	
}
   
i.fa.fa-youtube {
    font-size: 18px;       
} 

 i.fa.fa-facebook {
    font-size: 15px;    
}

i.fa.fa-google-plus{
    font-size: 15px;    
}

i.fa.fa-flask{
    font-size: 15px;    
}

index_body.html

Code: Alles auswählen

<!-- EVENT index_body_stat_blocks_after -->

<p>
<!-- Facebook -->
<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.forum.my-tastenworld.ch" title="Share on Facebook" target="_blank" class="btn btn-facebook"><i class="fa fa-facebook"></i> Facebook</a>
<!-- Google+ -->
<a href="https://plus.google.com/share?url=https%3A%2F%2Fwww.forum.my-tastenworld.ch&title=Foren-%C3%9Cbersicht" title="Share on Google+" target="_blank" class="btn btn-googleplus"><i class="fa fa-google-plus"></i> Google+</a>
<!-- Youtube -->
<a href="https://www.youtube.com/user/9000PRO" title="My-Tastenworld on Youtube" target="_blank" data-placement="top" class="btn btn-youtube"><i class="fa fa-youtube"></i> Youtube</a>
<!-- Paypal -->
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=tastenplayer%40bluewin%2ech&lc=CH&item_name=My%2dTastenworld%2ech&currency_code=EUR&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted" title="Paypal-Spende" target="_blank" class="btn btn-paypal"><i class="fa fa-flask"></i> Dukatentopf</a>
</p>

<!-- INCLUDE overall_footer.html -->

Re: 3.2.1 Font awesome social share buttons

Verfasst: 20.08.2017 12:18

von Lehrling

Ich habe das jetzt bei mir in prosilver eingebaut und es hat alles wunderbar geklappt. Mit deinem Code. Die Buttons liegen mittig und nicht weit auseinander. Ich fürchte, das Problem liegt an anderer Stelle an deinem Style.

Re: 3.2.1 Font awesome social share buttons

Verfasst: 20.08.2017 13:44

von Talk19zehn

Hello, ich baute das Konstrukt, wie folgt, ein:

CSS:

Code: Alles auswählen

div.socialbuttons {
	padding-top: 10px;
	padding-bottom: 13px;
	text-align: center;
}

a.btn.btn{
	font-weight: bold;
	font-size: 1em;
	color: #3d3d3d;
	padding: 3px;
	padding-top: 5px;
	background-color: #aeaeae;
	background-image: linear-gradient(to bottom, #f1f1f1 0%, #aeaeae 100%);
	background-image: -webkit-linear-gradient(top, #f1f1f1 0%,#aeaeae 100%);
	background-image: linear-gradient(to bottom, #f1f1f1 0%,#aeaeae 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#aeaeae',GradientType=0 );
	border: 2px solid #000000;
	border-radius: 5px;
	margin-right: 18px;
	margin-top: 7px;
}

i.fa.fa-youtube {
	font-size: 15px;
}

 i.fa.fa-facebook {
	font-size: 15px;
}

i.fa.fa-google-plus{
	font-size: 15px;
}

i.fa.fa-flask{
	font-size: 15px;
}

HTML: Bitte suche (index_body.html) 

und füge danach ein:

Code: Alles auswählen

<div class="socialbuttons">
	<!-- Facebook -->
	<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.forum.my-tastenworld.ch" title="Share on Facebook" target="_blank" class="btn btn-facebook"><i class="fa fa-facebook"></i>Facebook</a>
	<!-- Google+ -->
	<a href="https://plus.google.com/share?url=https%3A%2F%2Fwww.forum.my-tastenworld.ch&title=Foren-%C3%9Cbersicht" title="Share on Google+" target="_blank" class="btn btn-googleplus"><i class="fa fa-google-plus"></i>Google+</a>
	<!-- Youtube -->
	<a href="https://www.youtube.com/user/9000PRO" title="My-Tastenworld on Youtube" target="_blank" data-placement="top" class="btn btn-youtube"><i class="fa fa-youtube"></i>Youtube</a>
	<!-- Paypal -->
	<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=tastenplayer%40bluewin%2ech&lc=CH&item_name=My%2dTastenworld%2ech&currency_code=EUR&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted" title="Paypal-Spende" target="_blank" class="btn btn-paypal"><i class="fa fa-flask"></i>Dukatentopf</a>
</div><br />

Es sollte nun auch responsive in der kleinsten Auflösung 320x480px mit der Darstellung funktionieren (lediglich anhand der angepassten Layouts mit den Browsertools angeschaut).
Und erste Tests auf W3C "meckern" auch nicht mehr. Den Schriftgrad für i.fa.fa-youtube habe ich gleichlautend auf 15px gesetzt (vgl. obige CSS-Angaben) und darin:

Code: Alles auswählen

i.fa.fa-youtube {
	font-size: 15px;
}

... bitte teste, prüfe ggf. erneut.

Was deinen Footer angeht, kann auch nicht beurteilen und Fehler habe auch ich im Standard prosilver dahingehend keine.

Re: 3.2.1 Font awesome social share buttons

Verfasst: 20.08.2017 19:07

von Tastenplayer

Vielen Dank Talk19zehn - werde ich dann mal so machen. Dachte mir, da die Ext. von Tas2580 auf Eis liegt - es müsste doch auch ohne gehen. Immerhin wieder eine Ext. weniger. Jedoch alle bisher gefundenen Anleitungen sind eben in phpbb nicht so einfach umzusetzen. Etliche greifen überhaupt nicht.

Das Youtube Icon hatte ich grösser gemacht, da man es kaum erkennen konnte

Auf bestimmten Hintergründen sieht man einige Fontawesome icons schlecht, wenn sie nicht allzugross sind und einige kann man nicht nehmen, da sie nicht mittig angezeigt werden, was dann auch doof aussieht(zBsp. das money icon)

Hat einigermassen geklappt: im iPhone 4 ist es leider überhaupt nicht responsiv(Gibt es Probleme, dann doch meistens mit diesem Gerät). In den anderen Telefonen nur in der Landscape Ansicht. Mit dieser Konfiguration kann man drei Buttons einfügen. Der Vierte kommt dann in der Responsiven Ansicht über die vorderen drei. Oder eben halt ohne Text nur mit den Icons.

Leider bisher nichts passendes im Netz gefunden. Müsste mal schauen, wie es konfiguriert werden muss, dass eben in der responsiven Ansicht nur noch die Icons angezeigt werden, wie in der Navbar Footer. Bis dahin muss halt der Dukatentopf wieder in den Header

[ externes Bild ]

Ich denke ich weiss jetzt warum: Margin-top hat bei mir keinen Einfluss respektive ich kann da eingeben was ich will es zeigt keine Wirkung! Die von Dir angegeben 7px!

Im Style MyTaste wo es bei den Socials keinen Hintergrund/button hat sondern nur Schrift und icon ist es voll responsiv. Ausser dem Icon für den Spendentopf, aber das kann ich sicher mit einer kleinen Verschiebung noch regeln.

Re: 3.2.1 Font awesome social share buttons

Verfasst: 20.08.2017 21:59

von Talk19zehn

Hi,

Ich denke ich weiss jetzt warum: Margin-top hat bei mir keinen Einfluss respektive ich kann da eingeben was ich will es zeigt keine Wirkung! Die von Dir angegeben 7px!

dann stimmt m.E. etwas nicht im Grundsatz deiner einzelnen CSS-Verzeichnisse, wie sie laut den Regeln geladen werden müssen. Oder das HTML ist "fehlerhaft verschachtelt". Da wir dein Testboard (TB) nicht kennen, kann man kaum helfen, wie du selbst wissen wirst.
Bei mir klappte alles wunderbar im Standard Prosilver.

BTW: Die Schriftgößen würde ich für alle Button gleichlautend erfassen, da sonst die Button unterschiedlich hoch sind.

Wie das I-Phone4 reagiert, kann ich dir nicht sagen.

Re: 3.2.1 Font awesome social share buttons

Verfasst: 20.08.2017 22:11

von Tastenplayer

Glaub ich eher nicht, dass diesmal mein Style schuld ist

Vielleicht ist es ja auch deshalb, weil ich die Statblock Ext. von Kirk installiert habe.
Beim Margin-bottom, dass nicht gegriffen hatte war im Foxi vorne ein grüner Strich!

Egal die Ext. Buttons von Tas2580 hatten ja auch keinen Text. Ohne Text sehen sie irgendwie besser aus und passen zu den Forenicons

[ externes Bild ]

Im MyTaste(was ja im prinzip der gleiche Style ist) geht es. Da hat es keinen Hintergrund und keinen Rahmen und ist alles Links!
[ externes Bild ]

Ja Talk19zehn hast recht -sehr komisch. Im Prosilver geht es mit dem margin-top

Nur jetzt zu versuchen herauszufinden woran das liegt dürfte unmöglich sein!? Muss ich mal schauen, wenn der Style dann endlich im Liveboard on ist.
[ externes Bild ]

Hab das jetzt nochmals genauer unter die Lupe genommen. In meinen Styles sowie dem Black-Silver-Split muss das

Code: Alles auswählen

margin-top: 7px;

bei div. socialbuttons unten eingefügt werden anstatt in

Code: Alles auswählen

a.btn.btn

dann greift es auch!

Re: 3.2.1 Font awesome social share buttons

Verfasst: 21.08.2017 15:22

von vfrblue

Ich habe diese Thema als "Anreiz" genommen und die Social Share-Buttons bei unserem Forum in die "Footer-Breadcrumb" gesetzt. Dort sind sie für uns gut untergebracht, und es gibt keine Probleme mit der responsiven Darstellung.
In der navbar_footer.html

Code: Alles auswählen

{% EVENT overall_footer_teamlink_after %}
   <!-- Facebook -->
   <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmeinedomain.de" title="Share on Facebook"><i class="fa fa-facebook-square"></i></a>
   <!-- Google+ -->
   <a href="https://plus.google.com/share?url=https%3A%2F%2Fmeinedomain.de&title=Foren-%C3%9Cbersicht" title="Share on Google+"><i class="fa fa-google-plus-square"></i></a>

In der .css

Code: Alles auswählen

 i.fa.fa-facebook-square {
   font-size: x-large;
   color: #0076B1;
}
i.fa.fa-google-plus-square{
   font-size: x-large;
   color: #0076B1;
}

Re: 3.2.1 Font awesome social share buttons

Verfasst: 21.08.2017 15:53

von Tastenplayer

Ja gute Idee, hatte ich mir auch schon überlegt. Nur habe ich da full house im Prosilver.
Wenn man sie unter oder über der Statistik reinmacht geht es auch, solange man nur Iconsbutton macht ohne Schriftzug!

Am besten wär es wohl im header irgendwo - ist bei mir aber auch ziemlich voll. Da würden sie gut gesehen - nerven jedoch irgendwie.
Ich habe sie jetzt wieder dahin gemacht, wo sie durch die Ext. von Tas2580 waren.

Ich habe noch ein script - html - css da wäre nur ein einziger Button. Kann man dann draufklicken und ausklappen. Allerdings hat es bisher nicht geklappt das einzufügen. Zudem soll es im IE weniger gut dargestellt werden.
Ausserdem, wenn wir jetzt scho die Font Awesome Icons zur Verfügung haben, dann sollte man das auch ausnutzen. Immerhin wieder ein Extension Problem weniger

. Wenn man etwas rumspielt sehen sie auch noch besser aus, als die herkömmlichen. Ausser dass der G+ halt etwas breiter wird.
[ externes Bild ][ externes Bild ]

Interessant war zu sehen, was Styleänderungen für Auswirkungen haben, wenn man Neues hinzufüge möchte.
Beim Style Prosilver einfach das Padding aus dem btn.btn Teil raus und bei jedem fa Icon rein. Schon konnte das zu breite g+ Icon angepasst werden.

Code: Alles auswählen

div.socialbuttons {
   padding-top: 5px;
   padding-bottom: 10px;
   text-align: center;
   margin-bottom: -31px;
}

a.btn.btn{
   font-weight: bold;
   font-size: 1em;
   color: #666666;   
   background: #e0e2e6;
   background: -moz-linear-gradient(top, #e0e2e6 0%, #f8f8f9 100%);
   background: -webkit-linear-gradient(top, #e0e2e6 0%,#f8f8f9 100%);
   background: linear-gradient(to bottom, #e0e2e6 0%,#f8f8f9 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e2e6', endColorstr='#f8f8f9',GradientType=0 );   
   border: 2px solid #196DB5;
   border-radius: 100px;
   margin-left: 8px;
   margin-right: 8px;   
}

   
i.fa.fa-youtube {
   font-size: 17px;
   padding-top: 6px;
   padding-bottom: 6px;
   padding-left: 8px;
   padding-right: 9px;  
} 

 i.fa.fa-facebook-official {
   font-size: 17px;  
   padding-top: 6px;
   padding-bottom: 6px;
   padding-left: 8px;
   padding-right: 9px;  
}

i.fa.fa-google-plus{
   font-size: 17px;  
   padding-top: 6px;
   padding-bottom: 6px;
   padding-left: 5px;
   padding-right: 5px;  
}

i.fa.fa-flask{
   font-size: 17px; 
   padding-top: 6px;
   padding-bottom: 6px;
   padding-left: 8px;
   padding-right: 8px;  
}

Jedoch in den anderen Styles samt Black-Silver-Split klappte das so wieder nicht. In meinem Style Keyboard wurden nur noch 4 Schlitze angezeigt anstatt der Icons.
Damit es klappte musste für das google plus Icon noch ein btn.btn-googleplus erstellt werden!

Code: Alles auswählen

div.socialbuttons {
   padding-top: 5px;
   padding-bottom: 10px;
   text-align: center;
   margin-bottom: -20px;
}

a.btn.btn{
   font-weight: bold;
   font-size: 1em;
   color: #3C3C3C;
   padding-top: 14px;
   padding-bottom: 7px;
   padding-left: 9px;
   padding-right: 10px;  
   background: -moz-linear-gradient(top, rgba(168,168,168,0.97) 0%, rgba(168,168,168,0.97) 1%, rgba(206,206,206,0.98) 29%, rgba(234,234,234,0.98) 40%, rgba(234,234,234,0.99) 60%, rgba(206,206,206,0.99) 70%, rgba(168,168,168,1) 99%, rgba(168,168,168,1) 100%);
   background: -webkit-linear-gradient(top, rgba(168,168,168,0.97) 0%,rgba(168,168,168,0.97) 1%,rgba(206,206,206,0.98) 29%,rgba(234,234,234,0.98) 40%,rgba(234,234,234,0.99) 60%,rgba(206,206,206,0.99) 70%,rgba(168,168,168,1) 99%,rgba(168,168,168,1) 100%);
   background: linear-gradient(to bottom, rgba(168,168,168,0.97) 0%,rgba(168,168,168,0.97) 1%,rgba(206,206,206,0.98) 29%,rgba(234,234,234,0.98) 40%,rgba(234,234,234,0.99) 60%,rgba(206,206,206,0.99) 70%,rgba(168,168,168,1) 99%,rgba(168,168,168,1) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7a8a8a8', endColorstr='#a8a8a8',GradientType=0 );   
   border: 2px solid #757575;
   border-radius: 2px;  
   margin-left: 8px;
   margin-right: 8px;
}

a.btn.btn-googleplus{
   font-weight: bold;
   font-size: 1em;
   color: #373737;
   padding-top: 14px;
   padding-bottom: 7px;
   padding-left: 5px;
   padding-right: 5px;  
   background: -moz-linear-gradient(top, rgba(168,168,168,0.97) 0%, rgba(168,168,168,0.97) 1%, rgba(206,206,206,0.98) 29%, rgba(234,234,234,0.98) 40%, rgba(234,234,234,0.99) 60%, rgba(206,206,206,0.99) 70%, rgba(168,168,168,1) 99%, rgba(168,168,168,1) 100%);
   background: -webkit-linear-gradient(top, rgba(168,168,168,0.97) 0%,rgba(168,168,168,0.97) 1%,rgba(206,206,206,0.98) 29%,rgba(234,234,234,0.98) 40%,rgba(234,234,234,0.99) 60%,rgba(206,206,206,0.99) 70%,rgba(168,168,168,1) 99%,rgba(168,168,168,1) 100%);
   background: linear-gradient(to bottom, rgba(168,168,168,0.97) 0%,rgba(168,168,168,0.97) 1%,rgba(206,206,206,0.98) 29%,rgba(234,234,234,0.98) 40%,rgba(234,234,234,0.99) 60%,rgba(206,206,206,0.99) 70%,rgba(168,168,168,1) 99%,rgba(168,168,168,1) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7a8a8a8', endColorstr='#a8a8a8',GradientType=0 );   
   border: 2px solid #757575;
   border-radius: 2px;  
   margin-left: 8px;
   margin-right: 8px;
}

i.fa.fa-youtube {
   font-size: 20px;
}

 i.fa.fa-facebook-official {
   font-size: 20px;
}

i.fa.fa-google-plus{
   font-size: 20px;   
}

i.fa.fa-flask{
   font-size: 20px;
}