如何使用该代码段获取社交媒体按钮？

Question

我有以下代码来创建社交媒体按钮。我在侧边栏的wordpress博客中使用它们。

＆＃13;

＆＃13;

#include <opencv2/core/core.hpp>
#include <opencv2/highgui/highgui.hpp>
#include <iostream>

using namespace cv;
using namespace std;

int main( int argc, char** argv )
{
  if( argc != 2)
  {
   cout <<" Usage: display_image ImageToLoadAndDisplay" << endl;
   return -1;
  }

  Mat image;
  image = imread(argv[1], CV_LOAD_IMAGE_COLOR);   // Read the file

  if(! image.data )                              // Check for invalid input
  {
    cout <<  "Could not open or find the image" << std::endl ;
    return -1;
  }

  namedWindow( "Display window", WINDOW_AUTOSIZE );// Create a window for display.
  imshow( "Display window", image );                   // Show our image inside it.

  waitKey(0);                                          // Wait for a keystroke in the window
  return 0;
}

＆＃13;

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");

/* General rule */

.dist {
  margin-left: 7px;
}
.button-big {
  font-size: 2em;
  width: 50px;
  text-align: center;
  padding: 0.2em 0em 0.2em 0em;
  display: inline-block;
}
/* Facebook class and animation */

.facebook {
  color: #3B5998;
  border: 1px solid #3B5998;
}
.facebook:hover {
  animation: facebookAnim 0.4s normal forwards linear;
  -webkit-animation: facebookAnim 0.4s normal forwards linear;
}
@keyframes facebookAnim {
  50% {
    background-color: #3B5998;
  }
  100% {
    background-color: #3B5998;
    border: 1px solid #3B5998;
    color: #fff;
  }
}
@-webkit-keyframes facebookAnim {
  50% {
    background-color: #3B5998;
  }
  100% {
    background-color: #3B5998;
    border: 1px solid #3B5998;
    color: #fff;
  }
}
/* YouTube class and animation */

.youtube {
  color: #bb0000;
  border: 1px solid #bb0000;
}
.youtube:hover {
  animation: ytAnim 0.4s normal forwards linear;
  -webkit-animation: ytAnim 0.4s normal forwards linear;
}
@keyframes ytAnim {
  50% {
    background-color: #bb0000;
  }
  100% {
    background-color: #bb0000;
    border: 1px solid #bb0000;
    color: #fff;
  }
}
@-webkit-keyframes ytAnim {
  50% {
    background-color: #bb0000;
  }
  100% {
    background-color: #bb0000;
    border: 1px solid #bb0000;
    color: #fff;
  }
}
/* Instagram class and animation */

.instagram {
  color: #125688;
  border: 1px solid #125688;
}
.instagram:hover {
  animation: instaAnim 0.4s normal forwards linear;
  -webkit-animation: instaAnim 0.4s normal forwards linear;
}
@-webkit-keyframes instaAnim {
  50% {
    background-color: #125688;
  }
  100% {
    background-color: #125688;
    border: 1px solid #125688;
    color: #fff;
  }
}
@keyframes instaAnim {
  50% {
    background-color: #125688;
  }
  100% {
    background-color: #125688;
    border: 1px solid #125688;
    color: #fff;
  }
}
/* link styles */

.facebook a {
  color: #3B5998;
}
.youtube a {
  color: #bb0000;
}
.instagram a {
  color: #125688;
}
.facebook a:hover {
  color: #fff;
}
.youtube a:hover {
  color: #fff;
}
.instagram a:hover {
  color: #fff;
}

＆＃13;

＆＃13;

＆＃13;

有谁知道如何让他们圆？我觉得这样看起来好多了！我尝试了不同的东西，但没有任何对我有用！如果有人能帮助我会很棒！

谢谢！

Answer 1

添加此css类border-radius: 50%;

的button-big

Answer 2

我明白了，border-radius: 50%;是解决方案。 但是谢谢你！