Menu icon Foundation
Round social media buttons (Building Blocks) not working

After I embedded the Foundation 6.3 code for Round Social Buttons (in Building Blocks), they worked well, but then stopped working.  I made the icons dimensions slightly smaller and switched out one of the included icons (Pintarest) to instead use a Font Awesome envelope icon ("fa fa-envelope").  I'm working in the CSS version, not SCSS, and copied the CSS that came with the building block.  Any idea what I'm doing wrong?

 

Thanks,

Steve

 

Here's my HTML code:

<div class="row">

      <div class="small-12 columns">

        <div class="rounded-social-buttons">

          <a class="social-button facebook" href="https://www.facebook.com/hofherrmeatco."</a>

          <a class="social-button linkedin" href="https://www.linkedin.com/in/stevejuliusson/"></a>

          <a class="social-button instagram" href="https://www.instagram.com/hofherrmeatco/"></a>

          <a class="social-button envelope" href="mailto:sean@hofherrmeatco.com"></a>

        </div> <!-- end rounded-social-buttons -->

      </div> <!-- end 12-columns -->

    </div> <!-- end row --> 

 

 

Here's the CSS:

 

 

@charset "UTF-8";

 

.rounded-social-buttons {

  text-align: center;

}

 

.rounded-social-buttons .social-button {

  display: inline-block;

  position: relative;

  cursor: pointer;

  width: 3.125rem;

  height: 3.125rem;

  border: 0.125rem solid transparent;

  padding: 0;

  text-decoration: none;

  text-align: center;

  color: #fefefe;

  font-size: 1.5625rem;

  font-weight: normal;

  line-height: 2em;

  border-radius: 1.6875rem;

  transition: all 0.5s ease;

  margin-right: 0.25rem;

  margin-bottom: 0.25rem;

}

 

.rounded-social-buttons .social-button:hover, .rounded-social-buttons .social-button:focus {

  -webkit-transform: rotate(360deg);

      -ms-transform: rotate(360deg);

          transform: rotate(360deg);

}

 

.rounded-social-buttons .social-button.facebook {

  background: #3b5998;

}

 

.rounded-social-buttons .social-button.facebook:before {

  font-family: "FontAwesome";

  content: "";

}

 

.rounded-social-buttons .social-button.facebook:hover, .rounded-social-buttons .social-button.facebook:focus {

  color: #3b5998;

  background: #fefefe;

  border-color: #3b5998;

}

 

.rounded-social-buttons .social-button.twitter {

  background: #55acee;

}

 

.rounded-social-buttons .social-button.twitter:before {

  font-family: "FontAwesome";

  content: "";

}

 

.rounded-social-buttons .social-button.twitter:hover, .rounded-social-buttons .social-button.twitter:focus {

  color: #55acee;

  background: #fefefe;

  border-color: #55acee;

}

 

.rounded-social-buttons .social-button.linkedin {

  background: #007bb5;

}

 

.rounded-social-buttons .social-button.linkedin:before {

  font-family: "FontAwesome";

  content: "";

}

 

.rounded-social-buttons .social-button.linkedin:hover, .rounded-social-buttons .social-button.linkedin:focus {

  color: #007bb5;

  background: #fefefe;

  border-color: #007bb5;

}

 

.rounded-social-buttons .social-button.youtube {

  background: #bb0000;

}

 

.rounded-social-buttons .social-button.youtube:before {

  font-family: "FontAwesome";

  content: "";

}

 

.rounded-social-buttons .social-button.youtube:hover, .rounded-social-buttons .social-button.youtube:focus {

  color: #bb0000;

  background: #fefefe;

  border-color: #bb0000;

}

 

.rounded-social-buttons .social-button.instagram {

  background: #125688;

}

 

.rounded-social-buttons .social-button.instagram:before {

  font-family: "FontAwesome";

  content: "";

}

 

.rounded-social-buttons .social-button.instagram:hover, .rounded-social-buttons .social-button.instagram:focus {

  color: #125688;

  background: #fefefe;

  border-color: #125688;

}

 

.rounded-social-buttons .social-button.pinterest {

  background: #cb2027;

}

 

.rounded-social-buttons .social-button.pinterest:before {

  font-family: "FontAwesome";

  content: "";

}

 

.rounded-social-buttons .social-button.pinterest:hover, .rounded-social-buttons .social-button.pinterest:focus {

  color: #cb2027;

  background: #fefefe;

  border-color: #cb2027;

}

 

.rounded-social-buttons .social-button.google-plus {

  background: #dd4b39;

}

 

.rounded-social-buttons .social-button.google-plus:before {

  font-family: "FontAwesome";

  content: "";

}

 

.rounded-social-buttons .social-button.google-plus:hover, .rounded-social-buttons .social-button.google-plus:focus {

  color: #dd4b39;

  background: #fefefe;

  border-color: #dd4b39;

}

 

.rounded-social-buttons .social-button.github {

  background: #000000;

}

 

.rounded-social-buttons .social-button.github:before {

  font-family: "FontAwesome";

  content: "";

}

 

.rounded-social-buttons .social-button.github:hover, .rounded-social-buttons .social-button.github:focus {

  color: #000000;

  background: #fefefe;

  border-color: #000000;

}

 

.rounded-social-buttons .social-button.tumblr {

  background: #32506d;

}

 

.rounded-social-buttons .social-button.tumblr:before {

  font-family: "FontAwesome";

  content: "";

}

 

.rounded-social-buttons .social-button.tumblr:hover, .rounded-social-buttons .social-button.tumblr:focus {

  color: #32506d;

  background: #fefefe;

  border-color: #32506d;

}

 

/* -- added an email /envelope button: -- */

 

 

.rounded-social-buttons .social-button.envelope {

  background: #32506d;

}

 

.rounded-social-buttons .social-button.envelope:before {

  font-family: "FontAwesome";

  content: "";

}

 

.rounded-social-buttons .social-button.envelope:hover, .rounded-social-buttons .social-button.envelope:focus {

  color: #32506d;

  background: #fefefe;

  border-color: #32506d;

}

 

round social iconsbuilding blocksFoundation 6.3

After I embedded the Foundation 6.3 code for Round Social Buttons (in Building Blocks), they worked well, but then stopped working.  I made the icons dimensions slightly smaller and switched out one of the included icons (Pintarest) to instead use a Font Awesome envelope icon ("fa fa-envelope").  I'm working in the CSS version, not SCSS, and copied the CSS that came with the building block.  Any idea what I'm doing wrong?

 

Thanks,

Steve

 

Here's my HTML code:

<div class="row">

      <div class="small-12 columns">

        <div class="rounded-social-buttons">

          <a class="social-button facebook" href="https://www.facebook.com/hofherrmeatco."</a>

          <a class="social-button linkedin" href="https://www.linkedin.com/in/stevejuliusson/"></a>

          <a class="social-button instagram" href="https://www.instagram.com/hofherrmeatco/"></a>

          <a class="social-button envelope" href="mailto:sean@hofherrmeatco.com"></a>

        </div> <!-- end rounded-social-buttons -->

      </div> <!-- end 12-columns -->

    </div> <!-- end row --> 

 

 

Here's the CSS:

 

 

@charset "UTF-8";

 

.rounded-social-buttons {

  text-align: center;

}

 

.rounded-social-buttons .social-button {

  display: inline-block;

  position: relative;

  cursor: pointer;

  width: 3.125rem;

  height: 3.125rem;

  border: 0.125rem solid transparent;

  padding: 0;

  text-decoration: none;

  text-align: center;

  color: #fefefe;

  font-size: 1.5625rem;

  font-weight: normal;

  line-height: 2em;

  border-radius: 1.6875rem;

  transition: all 0.5s ease;

  margin-right: 0.25rem;

  margin-bottom: 0.25rem;

}

 

.rounded-social-buttons .social-button:hover, .rounded-social-buttons .social-button:focus {

  -webkit-transform: rotate(360deg);

      -ms-transform: rotate(360deg);

          transform: rotate(360deg);

}

 

.rounded-social-buttons .social-button.facebook {

  background: #3b5998;

}

 

.rounded-social-buttons .social-button.facebook:before {

  font-family: "FontAwesome";

  content: "";

}

 

.rounded-social-buttons .social-button.facebook:hover, .rounded-social-buttons .social-button.facebook:focus {

  color: #3b5998;

  background: #fefefe;

  border-color: #3b5998;

}

 

.rounded-social-buttons .social-button.twitter {

  background: #55acee;

}

 

.rounded-social-buttons .social-button.twitter:before {

  font-family: "FontAwesome";

  content: "";

}

 

.rounded-social-buttons .social-button.twitter:hover, .rounded-social-buttons .social-button.twitter:focus {

  color: #55acee;

  background: #fefefe;

  border-color: #55acee;

}

 

.rounded-social-buttons .social-button.linkedin {

  background: #007bb5;

}

 

.rounded-social-buttons .social-button.linkedin:before {

  font-family: "FontAwesome";

  content: "";

}

 

.rounded-social-buttons .social-button.linkedin:hover, .rounded-social-buttons .social-button.linkedin:focus {

  color: #007bb5;

  background: #fefefe;

  border-color: #007bb5;

}

 

.rounded-social-buttons .social-button.youtube {

  background: #bb0000;

}

 

.rounded-social-buttons .social-button.youtube:before {

  font-family: "FontAwesome";

  content: "";

}

 

.rounded-social-buttons .social-button.youtube:hover, .rounded-social-buttons .social-button.youtube:focus {

  color: #bb0000;

  background: #fefefe;

  border-color: #bb0000;

}

 

.rounded-social-buttons .social-button.instagram {

  background: #125688;

}

 

.rounded-social-buttons .social-button.instagram:before {

  font-family: "FontAwesome";

  content: "";

}

 

.rounded-social-buttons .social-button.instagram:hover, .rounded-social-buttons .social-button.instagram:focus {

  color: #125688;

  background: #fefefe;

  border-color: #125688;

}

 

.rounded-social-buttons .social-button.pinterest {

  background: #cb2027;

}

 

.rounded-social-buttons .social-button.pinterest:before {

  font-family: "FontAwesome";

  content: "";

}

 

.rounded-social-buttons .social-button.pinterest:hover, .rounded-social-buttons .social-button.pinterest:focus {

  color: #cb2027;

  background: #fefefe;

  border-color: #cb2027;

}

 

.rounded-social-buttons .social-button.google-plus {

  background: #dd4b39;

}

 

.rounded-social-buttons .social-button.google-plus:before {

  font-family: "FontAwesome";

  content: "";

}

 

.rounded-social-buttons .social-button.google-plus:hover, .rounded-social-buttons .social-button.google-plus:focus {

  color: #dd4b39;

  background: #fefefe;

  border-color: #dd4b39;

}

 

.rounded-social-buttons .social-button.github {

  background: #000000;

}

 

.rounded-social-buttons .social-button.github:before {

  font-family: "FontAwesome";

  content: "";

}

 

.rounded-social-buttons .social-button.github:hover, .rounded-social-buttons .social-button.github:focus {

  color: #000000;

  background: #fefefe;

  border-color: #000000;

}

 

.rounded-social-buttons .social-button.tumblr {

  background: #32506d;

}

 

.rounded-social-buttons .social-button.tumblr:before {

  font-family: "FontAwesome";

  content: "";

}

 

.rounded-social-buttons .social-button.tumblr:hover, .rounded-social-buttons .social-button.tumblr:focus {

  color: #32506d;

  background: #fefefe;

  border-color: #32506d;

}

 

/* -- added an email /envelope button: -- */

 

 

.rounded-social-buttons .social-button.envelope {

  background: #32506d;

}

 

.rounded-social-buttons .social-button.envelope:before {

  font-family: "FontAwesome";

  content: "";

}

 

.rounded-social-buttons .social-button.envelope:hover, .rounded-social-buttons .social-button.envelope:focus {

  color: #32506d;

  background: #fefefe;

  border-color: #32506d;

}

 

Rafi Benkual 11 days ago

Are you getting a Sass error in the terminal?

Can you describe what doesn't work? Do you not see the icons? Has anything changes with your layout? How are you importing the icons.

Rafi Benkual 10 days ago

Looks like it works here - https://codepen.io/rafibomb/pen/zdZVVL 

How do you have fontawesome imported?

You can add the CDN link to the head of your document like so:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

Steve Juliusson 10 days ago

It still doesn't work for me; I get the same little boxes.

Also, in your Codepen, the last icon that was supposed to have an envelope has substituted a "t" for Tumblr.

 

Please note:  

--The link I originally used had min.css at the end:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

 

...which is is different than your link above: 

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

 

Not that it matters, since the icons aren't rendering.  Anything else that could be affecting the icons from displaying?

Michal Pandyra 7 days ago

I'd recommend trying two things.

First, check the networking tab of your browser's web inspector to make sure that all of the font resources are being loaded correctly.

Second, make sure that the glyphs you've pasted into your CSS haven't been replaced by your code editor or IDE with an actual 'white box' character. Make sure you're saving your files in UTF-8.

As a suggestion, rather than pasting the character directly into the CSS, why don't you try using the unicode hex notation. This keeps things nice and ASCII. You can find the hex values for all of FontAwesome's unicode characters on their site.

Does that make a difference?

content: '□';

to:

content: '\f13c';