Главная » Языки программирования

Social media icon html

Содержание
  1. How TO — Social Media Buttons
  2. Rounded Example
  3. COLOR PICKER
  4. Report Error
  5. Thank You For Helping Us!
  6. 27 CSS Social Media Icons
  7. Related Articles
  8. Author
  9. Links
  10. Made with
  11. About a code
  12. 3D Social Media Button
  13. Author
  14. Links
  15. Made with
  16. About a code
  17. Social Animation
  18. Author
  19. Links
  20. Made with
  21. About a code
  22. Glass Effect Social Media Buttons with Neon Glow
  23. Author
  24. Links
  25. Made with
  26. About a code
  27. Social Links
  28. Author
  29. Links
  30. Made with
  31. About the code
  32. Dark Social Icons
  33. Author
  34. Links
  35. Made with
  36. About the code
  37. Fancy Hover Animation
  38. Author
  39. Links
  40. Made with
  41. About the code
  42. Social Media Icons
  43. Author
  44. Links
  45. Made with
  46. About the code
  47. 3D — CSS Social Tiles
  48. Author
  49. Links
  50. Made with
  51. About the code
  52. Social Media Icons
  53. Author
  54. Links
  55. Made with
  56. About the code
  57. The Social Drawer
  58. Author
  59. Links
  60. Made with
  61. About the code
  62. Group Button with SVG Icons
  63. Author
  64. Links
  65. Made with
  66. About the code
  67. Social Icons
  68. Author
  69. Links
  70. Made with
  71. About the code
  72. Social Buttons
  73. Author
  74. Links
  75. Made with
  76. About the code
  77. CSS3 Social Buttons Vol.2
  78. Author
  79. Links
  80. Made with
  81. About the code
  82. CSS3 Social Buttons Vol.1
  83. Author
  84. Links
  85. Made with
  86. About the code
  87. Only CSS Direction-Aware Cube Social Links
  88. Author
  89. Links
  90. Made with
  91. About the code
  92. Social Buttons
  93. Author
  94. Links
  95. Made with
  96. About the code
  97. Social Buttons with Tooltips
  98. Author
  99. Links
  100. Made with
  101. About a code
  102. Social Buttons With Icon Fonts
  103. Author
  104. Links
  105. Made with
  106. About the code
  107. Social Connect
  108. Author
  109. Links
  110. Made with
  111. About the code
  112. Clean Social Buttons
  113. Author
  114. Links
  115. Made with
  116. About the code
  117. Stylish Social Buttons
  118. Author
  119. Links
  120. Made with
  121. About the code
  122. SVG Social Icons
  123. Author
  124. Links
  125. Made with
  126. About the code
  127. Social Links
  128. Author
  129. Links
  130. Made with
  131. About the code
  132. Social Media Icons
  133. Author
  134. Links
  135. Made with
  136. About the code
  137. Social Media Icons
  138. Author
  139. How to Add Social Media Icons in HTML
  140. How to add social media icons in HTML
  141. Adding social icons as images (PNG, SVG, EPS, etc.)
  142. Vecteezy
  143. Flaticon
  144. IconFinder
  145. Adding social icons as icon fonts | html social media buttons
  146. FontAwesome
  147. Socicon
  148. Implementing icons using WP widget
Читайте также:  Python objects as dict keys

How TO — Social Media Buttons

Tip: Add border-radius:50% to create round buttons, and reduce the width :

Rounded Example

.fa <
padding: 20px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
border-radius: 50%;
>

Tip: Go to our Icons Tutorial to learn more about icons.

Go to our CSS Buttons Tutorial to learn more about how to style buttons.

Unlock Full Access 50% off

COLOR PICKER

colorpicker

Join our Bootcamp!

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials
Top References
Top Examples
Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

27 CSS Social Media Icons

Collection of hand-picked free HTML and CSS social media icon code examples from Codepen, GitHub and other resources. Update of October 2021 collection. 4 new items.

Author

Made with

About a code

3D Social Media Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Social Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: bootstrap.css, font-awesome.css, font-awesome-animation.css

Author

Made with

About a code

Glass Effect Social Media Buttons with Neon Glow

A CSS only implementation of glass-like neon glow buttons with text gradients & box-shadow s.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS only animation for social links.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Dark Social Icons

Author

Made with

About the code

Dark Social Icons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Fancy Hover Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Social Media Icons

Author

Made with

About the code

Social Media Icons

Social media icons with hover and inverse actions.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: 3D - CSS Social Tiles

Author

Made with

About the code

3D — CSS Social Tiles

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Social Media Icons

Author

Made with

About the code

Social Media Icons

Floating social media icons in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: The Social Drawer

Author

Made with

About the code

The Social Drawer

Just another drawer for your social links.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Group Button with SVG Icons

Author

Made with

About the code

Group Button with SVG Icons

Group button with svg icons, based on dribble project: https://dribbble.com/shots/694671-Buttons-Free-PSD

Demo image: Social Icons

Author

Made with

About the code

Social Icons

Social icons with vision 3D effect in HTML and CSS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Demo image: Social Buttons

Author

Made with

About the code

Social Buttons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: CSS3 Social Buttons Vol.2

Author

Made with

About the code

CSS3 Social Buttons Vol.2

Social buttons with CSS3 transition s.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: CSS3 Social Buttons Vol.1

Author

Made with

About the code

CSS3 Social Buttons Vol.1

Social buttons with CSS3 transition s.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Only CSS Direction-Aware Cube Social Links

Author

Made with

About the code

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Social Buttons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Social Buttons with Tooltips

Author

Made with

About the code

Social Buttons with Tooltips

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Social Buttons With Icon Fonts

Author

Made with

About a code

Social Buttons With Icon Fonts

Another set of social buttons for anyone to use/take inspiration from. This set takes advantage of Font Awesome icon pack.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Social Connect

Author

Made with

About the code

Social Connect

This is a design I found on Dribbble made by Paul Flavius Nechita. It’s a simple design, but it’s one of my favorites. I’ll have to work for a bit to get the box shadows the way it shows in the picture.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Clean Social Buttons

Author

Made with

About the code

Clean Social Buttons

Free HTML and CSS social buttons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Stylish Social Buttons

Author

Made with

About the code

Stylish Social Buttons

A few cool social buttons with smooth animations.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: SVG Social Icons

Author

Made with

About the code

SVG Social Icons

Round social icons in SVG, HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Social Links

Author

Made with

About the code

HTML and CSS social diamond links.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Social Media Icons

Author

Made with

About the code

Social Media Icons

Social media hover icons with pop-up titles.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Social Media Icons

Author

Made with

About the code

Social Media Icons

Social media icon reveal with transition .

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Social Flip Cards

Author

Источник

How to Add Social Media Icons in HTML

Adding social media icons to your website is a good way to make connections with your customers via social networks, get their feedback in an informal way and involve them in your company’s life.

Need some cool data visualization ideas? PPT presentation slides will get the job done.

How to add social media icons in HTML

There are multiple ways to add social media icons to your website:

  • Add icons as images in the desired format — .png, .svg or .eps.
  • Add them using icon fonts — FontAwesome, Glyphicons etc.
  • Implement icons using WP widget.
  • Add social media icons through WP plugin.

You can choose the one most suitable for you or try all of them.

Adding social icons as images (PNG, SVG, EPS, etc.)

If you are a designer, you can create or customize the icons yourself. But if you’re not, or just want to save some time, you can use many services where you’re able to choose the icon packs and download them. The most popular are:

Vecteezy

vecteezy

Choose the icon pack which is most relevant to your requirements and download it.

Then upload the files to your media library and add them in the following way (for HTML websites):

HubSpot banner.

And add some style to adjust the size and position of the icons:

monsterone powerpoint bundle

.social-icons < text-align: center; >.social-icons li < display:inline-block; list-style-type:none; -webkit-user-select:none; -moz-user-select:none; >.social-icons li a < border-bottom: none; >.social-icons li img

Flaticon Flaction

Add the icons to your collection, download them and incorporate them into your code in the same way as the previous case.

IconFinder

iconfinder

You can find many free social icon packs here, too. Just find the style which is more to your liking, add them to your social block and enjoy increased popularity in social networks!

There’s a way to apply social icons as SVG images. Just look at the following examples to see how you can customize them:

Adding social icons as icon fonts | html social media buttons

FontAwesome

FontAwesome is probably the most popular icon font nowadays. It’s super easy to implement and use. Let’s look at an example.

Add this code to your HTML:

Add the styles to your style.css file (you can add your own, or use this example):

body < text-align: center; >.wrapper < display: inline-flex; justify-content: center; >.wrapper i < padding: 10px; text-shadow: 0px 6px 8px rgba(0, 0, 0, 0.6); transition: all ease-in-out 150ms; >.wrapper a:nth-child(1) < color: #dd4b39; >.wrapper a:nth-child(2) < color: #4867AA; >.wrapper a:nth-child(3) < color: #1DA1F2; >.wrapper i:hover

By the way, you can find all the other icons in the FontAwesome Cheatsheet .

Examples of implementation:

Socicon

Another way is using Socicon icon font.

And apply some styles like the following:

.socicons-list < list-style: none; display: flex; justify-content: center; >.socicons-list li < margin: 30px 10px; >.socicons-list li a < text-decoration: none; padding: 30px; font-size: 30px; border-radius: 50%; color: #fff; background-color: #f1f1f1; transition: all ease-in-out 150ms; >.socicons-list li a:hover < text-shadow: 0 5px 10px #212121; >.socicons-list li:nth-child(1) a < background-color: #3e5b98; >.socicons-list li:nth-child(2) a < background-color: #c13584; >.socicons-list li:nth-child(3) a < background-color: #4da7de; >.socicons-list li:nth-child(4) a .socicons-list li:nth-child(5) a

Click the demo to see it in use:

Implementing icons using WP widget

If your website is built on WordPress, there’s a great way to add a block with social icons using a WordPress widget. To cut a long story short, just watch this tutorial:

I hope this article was useful to you, and feel free to leave your comments concerning different ways of adding social icons!

Источник

Оцените статью
© 2024 Программирование