Jump to content

No social sharing icons No button plus and button minus icon


Recommended Posts

Hello, the following buttons don't show in my shop

-Facebook

-Twitter

-Pintrest

-Google+

-Plus

-Minus

-Next

-Previous

 

They are in the img file

Can anyone help me ?

 

This is in the HTML

<button type="button" class="btn btn-default btn-twitter" onclick="socialsharing_twitter_click('Maserati Quattroporte  1/18 http://www.resinmodelcars.nl/nl/top-marques/68-maserati-ghibli-118.html');">
<i class="icon-twitter"></i> Tweet
 
 
When I check: www.resinmodelcars.nl/modules/socialsharing/img/twitter.gif    the icon is there, but it won't show on my site.
 
</button>

<!-- <img src="http://www.resinmodelcars.nl/modules/socialsharing/img/twitter.gif" alt="Tweet" /> -->

Edited by fvl1970 (see edit history)
Link to comment
Share on other sites

  • 2 weeks later...

You have error in global.css, declaration of icon font, Font Awesome is partly commented out 

/*!
 *  Font Awesome 3.2.1
 *  the iconic font designed for Bootstrap
 *  ------------------------------------------------------------------------------
 *  The full suite of pictographic icons, examples, and documentation can be
 *  found at http://fontawesome.io.'>http://fontawesome.io.  Stay up to date on Twitter at
 *  http://twitter.com/fontawesome.
 *
 *  License
 *  ------------------------------------------------------------------------------
 *  - The Font Awesome font is licensed under SIL OFL 1.1 -
 *    http://scripts.sil.org/OFL
 *  - Font Awesome CSS, LESS, and SASS files are licensed under MIT License -
 *    http://opensource.org/licenses/mit-license.html
 *  - Font Awesome documentation licensed under CC BY 3.0 -
 *    http://creativecommons.org/licenses/by/3.0/
 *  - Attribution is no longer required in Font Awesome 3.0, but much appreciated:
 *    "Font Awesome by Dave Gandy - http://fontawesome.io"
 *
 *  Author - Dave Gandy
 *  ------------------------------------------------------------------------------
 *  E@font-face {
  font-family: 'FontAwesome';
  src: url("../font/fontawesome-webfont.eot?v=3.2.1");
  src: url("../font/fontawesome-webfont.eot?#iefix&v=3.2.1") format("embedded-opentype"), url("../font/fontawesome-webfont.woff?v=3.2.1") format("woff"), url("../font/fontawesome-webfont.ttf?v=3.2.1") format("truetype"), url("../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1") format("svg");
  font-weight: normal;
  font-style: normal; }

It should be like 

/*!
 *  Font Awesome 3.2.1
 *  the iconic font designed for Bootstrap
 *  ------------------------------------------------------------------------------
 *  The full suite of pictographic icons, examples, and documentation can be
 *  found at http://fontawesome.io.'>http://fontawesome.io.  Stay up to date on Twitter at
 *  http://twitter.com/fontawesome.
 *
 *  License
 *  ------------------------------------------------------------------------------
 *  - The Font Awesome font is licensed under SIL OFL 1.1 -
 *    http://scripts.sil.org/OFL
 *  - Font Awesome CSS, LESS, and SASS files are licensed under MIT License -
 *    http://opensource.org/licenses/mit-license.html
 *  - Font Awesome documentation licensed under CC BY 3.0 -
 *    http://creativecommons.org/licenses/by/3.0/
 *  - Attribution is no longer required in Font Awesome 3.0, but much appreciated:
 *    "Font Awesome by Dave Gandy - http://fontawesome.io"
 *
 *  Author - Dave Gandy
 *  ------------------------------------------------------------------------------
 */

@font-face {
  font-family: 'FontAwesome';
  src: url("../font/fontawesome-webfont.eot?v=3.2.1");
  src: url("../font/fontawesome-webfont.eot?#iefix&v=3.2.1") format("embedded-opentype"), url("../font/fontawesome-webfont.woff?v=3.2.1") format("woff"), url("../font/fontawesome-webfont.ttf?v=3.2.1") format("truetype"), url("../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1") format("svg");
  font-weight: normal;
  font-style: normal; }
Link to comment
Share on other sites

Thanks for your answer!

 

Actually in my global.css I have:

 

 

/*!
 *  Font Awesome 4.1.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'FontAwesome';
  src: url("../fonts/fontawesome-webfont.eot?v=4.1.0");
  src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff?v=4.1.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.1.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal; }
 
I tried just to be sure but I can't see any changes.
 
Also for me is a question of FontAwesome but I don't see the solution...
Edited by kihka (see edit history)
Link to comment
Share on other sites

Ups, sorry!

 

I'm building my website so please don't look at the rest  :) .

 

http://www.mespetitespiecesfaciles.fr/shop/

It is in french, sorry.

 

If you put a product on cart and go to the cart summary (simulating a purchase) you will see that the minus and plus signs... has no sign. I can change backgrounds and colors but nothing else.

 

Thank you so much for your help!

Link to comment
Share on other sites

Check your theme product.tpl file , default theme have this 

<!-- quantity wanted -->
						{if !$PS_CATALOG_MODE}
						<p id="quantity_wanted_p"{if (!$allow_oosp && $product->quantity <= 0) || !$product->available_for_order || $PS_CATALOG_MODE} style="display: none;"{/if}>
							<label>{l s='Quantity'}</label>
							<input type="text" name="qty" id="quantity_wanted" class="text" value="{if isset($quantityBackup)}{$quantityBackup|intval}{else}{if $product->minimal_quantity > 1}{$product->minimal_quantity}{else}1{/if}{/if}" />
							<a href="#" data-field-qty="qty" class="btn btn-default button-minus product_quantity_down">
								<span><i class="icon-minus"></i></span>
							</a>
							<a href="#" data-field-qty="qty" class="btn btn-default button-plus product_quantity_up">
								<span><i class="icon-plus"></i></span>
							</a>
							<span class="clearfix"></span>
						</p>
						{/if}
Link to comment
Share on other sites

I did change the header . navi colour (line 5280) from #333333 into #FE5D01 this change did cause the problem. I did change to #333333 and now the icons are back on my site,

But I would still love to have header navi background to have colour #FE5D01. but how should I do this without loosing my icons again ?

Link to comment
Share on other sites

Good morning!

 

 

I have at least been able to establish that the error is somewhere in my global.css. If I download this file to its initial version (I'm still using the default-bootstrap theme) all the icons are recovered (even those that I didn't know I had, because I've never seen them!).
 
Tonight I will analyze the code step by step to understand where the the error is hiding...
 
Ciao!
Link to comment
Share on other sites

Good morning!


 


 


I have at least been able to establish that the error is somewhere in my global.css. If I download this file to its initial version (I'm still using the default-bootstrap theme) all the icons are recovered (even those that I didn't know I had, because I've never seen them!).

 

Tonight I will analyze the code step by step to understand where the the error is hiding...

 

Ciao!
Link to comment
Share on other sites

fvl1970, your issue is with code I posted before, changing one color do not influence on showing icons.

You could also clear cache on Advanced Preferences if changes are not shown straight away.

 

kihka, think you issue was combination of code in product.tpl, products.js maybe and global.css/products.css.

Is your issue solved or you are going to return code how it was ?

Link to comment
Share on other sites

Hi razaro, no my issue is still alive and kicking grrr...

 

I don't really understand where is the problem, the only thing that I know is that if I touch at the ul.step in global.css the icons disappear and I can't arrive to the point of the conflict.

Link to comment
Share on other sites

Hi again razaro and thank you so so much for your help!

 

This is the code in global.css that works:

ul.step {
  margin-bottom: 30px;
  overflow: hidden; }
  @media (min-width: 768px) {
    ul.step {
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      border-radius: 4px; } }
  ul.step li {
    float: left;
    width: 20%;
    text-align: left;
    border: 1px solid;
    border-top-color: #cacaca;
    border-bottom-color: #9a9a9a;
    border-right-color: #b7b7b7;
    border-left-width: 0px; }
    @media (max-width: 767px) {
      ul.step li {
        width: 100%;
        border-left-width: 1px; } }
    ul.step li a,
    ul.step li span, ul.step li.step_current span, ul.step li.step_current_end span {
      display: block;
      padding: 13px 10px 14px 13px;
      color: #333;
      font-size: 17px;
      line-height: 21px;
      font-weight: bold;
      text-shadow: 1px 1px white;
      position: relative; }
      @media (max-width: 992px) {
        ul.step li a,
        ul.step li span, ul.step li.step_current span, ul.step li.step_current_end span {
          font-size: 15px; } }
      @media (min-width: 992px) {
        ul.step li a:after,
        ul.step li span:after, ul.step li.step_current span:after, ul.step li.step_current_end span:after {
          content: ".";
          position: absolute;
          top: 0;
          right: -31px;
          z-index: 0;
          text-indent: -5000px;
          display: block;
          width: 31px;
          height: 52px;
          margin-top: -2px; } }
      ul.step li a:focus,
      ul.step li span:focus, ul.step li.step_current span:focus, ul.step li.step_current_end span:focus {
        text-decoration: none;
        outline: none; }
    ul.step li.first {
      border-left-width: 1px;
      border-left-color: #b7b7b7; }
      @media (min-width: 768px) {
        ul.step li.first {
          -moz-border-radius-topleft: 4px;
          -webkit-border-top-left-radius: 4px;
          border-top-left-radius: 4px;
          -moz-border-radius-bottomleft: 4px;
          -webkit-border-bottom-left-radius: 4px;
          border-bottom-left-radius: 4px; } }
      ul.step li.first span,
      ul.step li.first a {
        z-index: 5;
        padding-left: 13px !important; }
        @media (min-width: 768px) {
          ul.step li.first span,
          ul.step li.first a {
            -moz-border-radius-topleft: 4px;
            -webkit-border-top-left-radius: 4px;
            border-top-left-radius: 4px;
            -moz-border-radius-bottomleft: 4px;
            -webkit-border-bottom-left-radius: 4px;
            border-bottom-left-radius: 4px; } }
    ul.step li.second span, ul.step li.second a {
      z-index: 4; }
    ul.step li.third span, ul.step li.third a {
      z-index: 3; }
    ul.step li.four span, ul.step li.four a {
      z-index: 2; }
    ul.step li.last span {
      z-index: 1; }
    @media (min-width: 768px) {
      ul.step li.last {
        -moz-border-radius-topright: 4px;
        -webkit-border-top-right-radius: 4px;
        border-top-right-radius: 4px;
        -moz-border-radius-bottomright: 4px;
        -webkit-border-bottom-right-radius: 4px;
        border-bottom-right-radius: 4px; }
        ul.step li.last span {
          -moz-border-radius-topright: 4px;
          -webkit-border-top-right-radius: 4px;
          border-top-right-radius: 4px;
          -moz-border-radius-bottomright: 4px;
          -webkit-border-bottom-right-radius: 4px;
          border-bottom-right-radius: 4px; } }
    ul.step li.step_current {
      font-weight: bold;
      background: #42b856;
      background: -moz-linear-gradient(top, #42b856 0%, #43ab54 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #42b856), color-stop(100%, #43ab54));
      background: -webkit-linear-gradient(top, #42b856 0%, #43ab54 100%);
      background: -o-linear-gradient(top, #42b856 0%, #43ab54 100%);
      background: -ms-linear-gradient(top, #42b856 0%, #43ab54 100%);
      background: linear-gradient(to bottom, #42b856 0%, #43ab54 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#42b856', endColorstr='#43ab54',GradientType=0);
      border-color: #399b49 #51ae5c #208931 #369946; }
      ul.step li.step_current span {
        color: #fff;
        text-shadow: 1px 1px #208931;
        border: 1px solid;
        border-color: #73ca77 #74c776 #74c175 #74c776;
        position: relative; }
        @media (min-width: 992px) {
          ul.step li.step_current span {
            padding-left: 38px; }
            ul.step li.step_current span:after {
              background: url(../img/order-step-a.png) right 0 no-repeat; } }
    ul.step li.step_current_end {
      font-weight: bold; }
    ul.step li.step_todo {
      background: #f7f7f7;
      background: -moz-linear-gradient(top, #f7f7f7 0%, #ededed 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100%, #ededed));
      background: -webkit-linear-gradient(top, #f7f7f7 0%, #ededed 100%);
      background: -o-linear-gradient(top, #f7f7f7 0%, #ededed 100%);
      background: -ms-linear-gradient(top, #f7f7f7 0%, #ededed 100%);
      background: linear-gradient(to bottom, #f7f7f7 0%, #ededed 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#ededed',GradientType=0); }
      ul.step li.step_todo span {
        display: block;
        border: 1px solid;
        border-color: #fff;
        color: #333;
        position: relative; }
        @media (min-width: 992px) {
          ul.step li.step_todo span {
            padding-left: 38px; }
            ul.step li.step_todo span:after {
              background: url(../img/order-step-current.png) right 0 no-repeat; } }
    ul.step li.step_done {
      border-color: #666666 #5f5f5f #292929 #5f5f5f;
      background: #727171;
      background: -moz-linear-gradient(top, #727171 0%, #666666 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #727171), color-stop(100%, #666666));
      background: -webkit-linear-gradient(top, #727171 0%, #666666 100%);
      background: -o-linear-gradient(top, #727171 0%, #666666 100%);
      background: -ms-linear-gradient(top, #727171 0%, #666666 100%);
      background: linear-gradient(to bottom, #727171 0%, #666666 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#727171', endColorstr='#666666',GradientType=0); }
      ul.step li.step_done a {
        color: #fff;
        text-shadow: 1px 1px rgba(0, 0, 0, 0.3);
        border: 1px solid;
        border-color: #8b8a8a; }
        @media (min-width: 992px) {
          ul.step li.step_done a {
            padding-left: 38px; }
            ul.step li.step_done a:after {
              background: url(../img/order-step-done.png) right 0 no-repeat; } }
    @media (min-width: 992px) {
      ul.step li.step_done.step_done_last a:after {
        background: url(../img/order-step-done-last.png) right 0 no-repeat; } }
    @media (min-width: 992px) {
      ul.step li#step_end span:after {
        display: none; } }
    ul.step li em {
      font-style: normal; }
      @media (min-width: 768px) and (max-width: 991px) {
        ul.step li em {
          display: none; } }

In general if I touch at this part of the code the icons disappear.

 

I.e.: just to let you better understand, in the middle of this part there is a color (background: #42b856) and if I change simply this little number, I lost my icons.

 

I've attached the screenshot of what I actually see (without any change) in my cart summary and it is the green color (and other little things) on the step header that I would like to change.

 

 

 

 

post-906849-0-11001800-1422883492_thumb.png

Link to comment
Share on other sites

That is strange , any minor change should not influence that much.

 

Can you do change and leave it like that for me to  test ?

 

And try this code, I am guessing what you are trying to do

ul.step {
  margin-bottom: 30px;
  overflow: hidden; }
  @media (min-width: 768px) {
    ul.step {
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      border-radius: 4px; } }
  ul.step li {
    float: left;
    width: 20%;
    text-align: left;
    border: 1px solid;
    border-top-color: #70D5DF;
    border-bottom-color: #70D5DF;
    border-right-color: #70D5DF;
    border-left-width: 0px; }
    @media (max-width: 767px) {
      ul.step li {
        width: 100%;
        border-left-width: 1px; } }
    ul.step li a,
    ul.step li span, ul.step li.step_current span, ul.step li.step_current_end span {
      display: block;
      padding: 13px 10px 14px 13px;
      color: #333;
      font-size: 17px;
      line-height: 21px;
      font-weight: bold;
      text-shadow: none;
      position: relative; }
      @media (max-width: 992px) {
        ul.step li a,
        ul.step li span, ul.step li.step_current span, ul.step li.step_current_end span {
          font-size: 15px; } }
      @media (min-width: 992px) {
        ul.step li a:after,
        ul.step li span:after, ul.step li.step_current span:after, ul.step li.step_current_end span:after {
          content: ".";
          position: absolute;
          top: 0;
          right: -31px;
          z-index: 0;
          text-indent: -5000px;
          display: block;
          width: 31px;
          height: 52px;
          margin-top: -2px; } }
      ul.step li a:focus,
      ul.step li span:focus, ul.step li.step_current span:focus, ul.step li.step_current_end span:focus {
        text-decoration: none;
        outline: none; }
    ul.step li.first {
      border-left-width: 1px;
      border-left-color: #b7b7b7; }
      @media (min-width: 768px) {
        ul.step li.first {
          -moz-border-radius-topleft: 4px;
          -webkit-border-top-left-radius: 4px;
          border-top-left-radius: 4px;
          -moz-border-radius-bottomleft: 4px;
          -webkit-border-bottom-left-radius: 4px;
          border-bottom-left-radius: 4px; } }
      ul.step li.first span,
      ul.step li.first a {
        z-index: 5;
        padding-left: 13px !important; }
        @media (min-width: 768px) {
          ul.step li.first span,
          ul.step li.first a {
            -moz-border-radius-topleft: 4px;
            -webkit-border-top-left-radius: 4px;
            border-top-left-radius: 4px;
            -moz-border-radius-bottomleft: 4px;
            -webkit-border-bottom-left-radius: 4px;
            border-bottom-left-radius: 4px; } }
    ul.step li.second span, ul.step li.second a {
      z-index: 4; }
    ul.step li.third span, ul.step li.third a {
      z-index: 3; }
    ul.step li.four span, ul.step li.four a {
      z-index: 2; }
    ul.step li.last span {
      z-index: 1; }
    @media (min-width: 768px) {
      ul.step li.last {
        -moz-border-radius-topright: 4px;
        -webkit-border-top-right-radius: 4px;
        border-top-right-radius: 4px;
        -moz-border-radius-bottomright: 4px;
        -webkit-border-bottom-right-radius: 4px;
        border-bottom-right-radius: 4px; }
        ul.step li.last span {
          -moz-border-radius-topright: 4px;
          -webkit-border-top-right-radius: 4px;
          border-top-right-radius: 4px;
          -moz-border-radius-bottomright: 4px;
          -webkit-border-bottom-right-radius: 4px;
          border-bottom-right-radius: 4px; } }
    ul.step li.step_current {
      font-weight: bold;
      background: #9A8F7D;
      border-color: #9A8F7D; }
      ul.step li.step_current span {
        color: #fff;
        text-shadow: 1px 1px #9A8F7D;
        border: 1px solid;
        border-color: #9A8F7D;
        position: relative; }
        @media (min-width: 992px) {
          ul.step li.step_current span {
            padding-left: 38px; }
            ul.step li.step_current span:after {
              background: url(../img/order-step-a.png) right 0 no-repeat; } }
    ul.step li.step_current_end {
      font-weight: bold; }
    ul.step li.step_todo {
      background: #70D5DF; }
      ul.step li.step_todo span {
        display: block;
        border: 1px solid;
        border-color: #70D5DF;
        color: #fff;
        position: relative; }
        @media (min-width: 992px) {
          ul.step li.step_todo span {
            padding-left: 38px; }
            ul.step li.step_todo span:after {
              background: url(../img/order-step-current.png) right 0 no-repeat; } }
    ul.step li.step_done {
      border-color: #666666 #5f5f5f #292929 #5f5f5f;
      background: #727171;
      background: -moz-linear-gradient(top, #727171 0%, #666666 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #727171), color-stop(100%, #666666));
      background: -webkit-linear-gradient(top, #727171 0%, #666666 100%);
      background: -o-linear-gradient(top, #727171 0%, #666666 100%);
      background: -ms-linear-gradient(top, #727171 0%, #666666 100%);
      background: linear-gradient(to bottom, #727171 0%, #666666 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#727171', endColorstr='#666666',GradientType=0); }
      ul.step li.step_done a {
        color: #fff;
        text-shadow: 1px 1px rgba(0, 0, 0, 0.3);
        border: 1px solid;
        border-color: #8b8a8a; }
        @media (min-width: 992px) {
          ul.step li.step_done a {
            padding-left: 38px; }
            ul.step li.step_done a:after {
              background: url(../img/order-step-done.png) right 0 no-repeat; } }
    @media (min-width: 992px) {
      ul.step li.step_done.step_done_last a:after {
        background: url(../img/order-step-done-last.png) right 0 no-repeat; } }
    @media (min-width: 992px) {
      ul.step li#step_end span:after {
        display: none; } }
    ul.step li em {
      font-style: normal; }
      @media (min-width: 768px) and (max-width: 991px) {
        ul.step li em {
          display: none; } }
Link to comment
Share on other sites

Yes, also for me it is a bit strange that just changing a color could affect the icons existence!

 

Ok, I have used your code (what I'm trying to do is more or less what you did) and unfortunately the result doesn't change, no more icons.

 

I leave it like it is now with your code so that you could see: just simulate to buy something and you will immediately see that in the cart summary there are no icons (plus and minus and trash).

 

http://www.mespetitespiecesfaciles.fr/

 

In any case I really appreciate your help!

Link to comment
Share on other sites

Hmm you don't have Unicode characters in global.css that are used for icons  like from 

https://github.com/PrestaShop/PrestaShop/blob/1.6/themes/default-bootstrap/css/global.css#L4052 to

https://github.com/PrestaShop/PrestaShop/blob/1.6/themes/default-bootstrap/css/global.css#L5455

 

Not sure why, maybe your text editor save file with some other encoding so those characters are lost.

Link to comment
Share on other sites

YOU ARE A GENIUS!!!

 

Thaaaaaaank you so much!

 

Effectively I have tried with TextEditor, just changing the color of the text, and it works perfectly!

 

You save me!

 

I can't close the post but for my part is <SOOOOOOLVED>.

 

I will try later changing the encoding in Dreamweawer but now I have the solution.

 

Have a super evening!

Link to comment
Share on other sites

  • 3 months later...

Ciao tougou93 et pardon pour le retard de cette réponse!

 

En realité je n'ai rien changé, le fait était que, en utilisant Dreamweawer, quelque fois, après avoir sauvegardé un fichier qui utilise les awesome, à la place d'avoir les guillemets et le nom du font awesome j'avais seulement "".

 

Au tout debut je n'avais pas compris et après, grace à l'aide de razaro, j'ai vu qu'il s'agissait d'un problème de codage au moment de la sauvegarde.

 

J'ai tout simplement commencer à utiliser gedit pour modifier mes fichiers.

 

J'éspère que c'était cela la question :-) .

 

Bon courage!

 

Fra

Link to comment
Share on other sites

Salut,

 

Ok ok.

 

Moi j'utilise Notepad ++, mais je n'ai jamais eu ce problème de disparition, la chaîne de caractère entre les guillemets est juste, c'est juste l'icône qui ne s'affiche pas.

Du coup, j'ai remplacé par "+" et "-". Système D...

Link to comment
Share on other sites

  • 3 months later...
  • 4 months later...
×
×
  • Create New...