Social icons code. CSS sprites on the example of installing buttons-links on the blog “subscription to updates

• resizing does not affect the quality,
• perfectly displayed on all devices, including those with Retina displays,
• application of almost any style applicable to the text, such as background, color, shadows, etc.,
• ease of implementation;

Thanks to these advantages, font icons have become popular among designers, developers and are used by such CSS / frameworks as.
For your attention fonts with icons of social networks.

1. RONDO SOCIAL ICON FONT

Excellent font icons of some of the most popular social networks and not only, but unfortunately there is no icon of ours, everyone's favorite.

2. Fontello - icon fonts generator

Icon generator with a huge set of ready-made icons. One of the advantages is the ability to select only the necessary icons and generate a font from them, which will favorably affect the page optimization and the loading speed of such a font. Among the advantages, one can also highlight the presence of icons of such social networks as Vkontakte and Odnoklassniki.

3. Mono Social Icons Font

An ideal solution for quickly integrating font icons into a project, there is already an embed code for CSS, SCSS and example HTML. The only drawback is the lack of popular Russian social networks.

4. Pixeden - Social Icon Pack

Nice icons with a powerful demo page, you can see the beauty of using font icons and styling them with CSS

October 29, 2019 The entry has been updated

Yuri Nemets

Social media button effects for website

Do you think it is possible to combine social media buttons and images? So that both look very beautiful and creative. Yes, you can do it in a very interesting way. And not even one, but several. To be more precise, in this article you will find 12 ways to make cool effects for social media buttons when you hover over an image. In some cases, you need not just hover, but also a mouse click, which also adds interactivity. An unusual way to make your site stand out using just such effects when you hover over an image.

See all 12 examples and download from the link below:

Download

By the way, regarding hover effects, there are a couple more articles on the site on this topic:

Like the effect - use it!

For example, I liked the first effect. Hover over the image below to see the effect.

(hover over image)

Quite an attractive way to highlight the most important images both on the site and on a one-page selling site. But, as I already wrote, there are much more effects (12!).

Step 1 - HTML

For the icons you see on social media buttons, FA (Font Awesome) is used. These icons are connected in one line between blocks :

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

After you have downloaded all the sources, you need to choose the effect you like. My effect is in the file index.html... This file also contains all the necessary styles to create the hover effect.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<div class = "image-effect-fall-back"> <div class = "share-layer"> <a href = "#" class = "share-button share-via-vk"> <i class = "fa fa-vk"> In contact with</ a> <a href = "#" class = "share-button share-via-facebook"> <i class = "fa fa-facebook"> Facebook</ a> <a href = "#" class = "share-button share-via-twitter"> <i class = "fa fa-twitter"> Twitter</ a> </ div> <div class = "image-layer"> <img src = "images / tree.jpg" width = "500" alt = "(! LANG: California surf" > !} </ div> </ div>

All the necessary structure is there. All that remains is to set the styles in CSS. Therefore, we pass to the 2nd and, at the same time, the last step.

Step 2 - CSS

Styles are found in every HTML file between blocks ... That is, in each file with different effects, in this block at the top of the document there are corresponding styles.

You need to take these styles and place them in your stylesheet:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99

.image-effect-fall-back (width: 500px; height: 300px; position: relative; margin: 0 auto; -webkit-perspective: 800px; perspective: 800px;) .image-effect-fall-back .image-layer (position: absolute; top: 0; left: 0; height: 300px; -webkit-transition: 0.6s; transition: 0.6s; z-index: 1;) .image-effect-fall-back: hover .image- layer (-webkit-transform: rotateX (70deg); transform: rotateX (70deg); overflow: visible;) .image-effect-fall-back .image-layer img (height: 100%;) .image-effect-fall -back .image-layer: before (content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba (0, 0, 0, 0.5); box -shadow: 0 0 100px 50px rgba (0, 0, 0, 0.5); opacity: 0; -webkit-transition: all 0.5s; transition: all 0.5s; -webkit-transform: rotateX (114deg) translateZ (-26px ) translateY (110px) scale (0.75 ); transform: rotateX (114deg) translateZ (-26px) translateY (110px) scale (0.75); -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; ) .image-effect-fall-back: hover .image-layer: before (opacity: 0.3;) .image-effect-fall-back .share-layer (position: absolute; bottom: 100px; left: 0; width: 100%; height: 100px; opacity: 0; z-index: 10; -webkit-transition: 0.6s; transition: 0.6s; -webkit-transform: rotateX (70deg); transform: rotateX (70deg);) .image -effect-fall-back: hover .share-layer (opacity: 1; -webkit-transform: rotateX (0deg) translateY (-70px); transform: rotateX (0deg) translateY (-70px);) / * styles for all buttons * /.share-button (display: inline-block; text-decoration: none; color: #ffffff; padding: 12px; width: 90px; border-radius: 2px; margin: 25px 10px;) / * color of social media buttons * /.share-via-vk (background-color: # 4C75A3;) .share-via-facebook (background-color: # 3b5998;) .share-via-twitter (background-color: # 00aced;)

I warn you right away: some examples use jQuery, because there, for the full effect, you need to click on the image. You just need to take all the JS code that is used on the page with the example you like.

Attention! After you insert the CSS code into your stylesheet, the buttons may not display exactly as shown in the example. This may be due to the fact that your stylesheet has different styles for the elements and classes that are used in the demo.

Output

As a rule, creativity has always been welcomed. I think here everyone will be able to choose one of 12 effects for themselves and use in the future in their own projects.

I dug up a good thing. Interface icons enclosed in a single sprite. If anyone does not know what a sprite is, this is one picture in which there are several images that are displayed on the site separately using css. I don't know if I explained it clearly, but you can find out what a sprite is using this assembly as an example.

Benefits of sprites

I haven't posted icons for a long time, probably because all the icons that I needed were already on my site :)) but I needed icons in one sprite and I found these and share them with you. By the way, the distinctive feature and the most significant plus of the sprite is that if the sprite image is loaded once, then all the elements of this sprite will no longer be loaded and, accordingly, will reduce the speed of the html page. Typically, sprites are used for buttons that change on hover. Sometimes it happens that the button in its normal state and the button on hover are two different pictures, and you may have noticed on some sites, when you hover over the button, the image does not appear immediately - it is loaded. With a sprite, this will not be a problem. Another plus of sprites is that it saves space. Let's say you have some kind of plugin, such as a slider, and several dozen images go to it (the corners of the frames, the frames themselves, arrows, bullets, social media icons, and so on). So, when they are all enclosed in one picture, it is much more convenient and neat looking if they were lying around in a folder with images separately.

What is depicted on these icons

As usual, I will tell you what images are among these icons so that you can find the necessary icons for the search, which is in the main menu at the top of the site: castle, robot, diamond or precious stone, monitor, gift, microphone, rocket, ice cream, man , clock, scissors, icons of any social networks and services, wrenches, bow, wallet, ipad, watermelon, wallet, game joystick, calculator, clown, light bulb, bow, trash can or basket, letter, globe, burger, auto, cloud , camera and much more. There are about 100 images in total.

Connecting these icons is very simple:

1. We connect the css file sprite.css in this way: create a css folder at the root of your site, add this css file there, and on the page where the icons will be displayed between the tags insert the following code:

3. In the place where you want to put the icon, paste the code:

4. You can use my demo, there are all the presented icons and using the google chrome element viewer, define the name of the icon and insert instead of the "icon name". Let's say the clock icon has the following code:

Well, I think it's not difficult to figure out how to insert these icons from a sprite, especially since I've already explained everything :)) Enjoy it!

Hello dear readers of the blog site. You can, of course, use the plugin for this task, but it's not so difficult to do it yourself, and there will be fewer, especially since I already have a lot of them working for them (see the article at the link given). I took the social media icons from, which I have already written about in some detail (I hope that Dimoks will not object to this).

And also I considered it appropriate for Email.

Create a sprite from buttons and insert the Html code into the site

After you have created all the necessary groups and pages in social networks, which means you have received all the necessary links, you can be puzzled by adding buttons to the site. You can, of course, in accordance with my post about, choose a suitable icon for each social network and, if necessary, reduce its size to the required one in and.

But this is not the best option. Why? Well, because for uploading each image of the social network, a separate request will be made to your server. If you have a dozen icons, it means ten requests, which in any way will create an additional load on the server and. Such waste does not suit us, especially since it has long been.

I decided not to reinvent the wheel (create a sprite), but used the one created by the Share42 constructor (a link to a description of how to work with it is given just above). In it, you can select those social networks, the icons of which you will need, and along with the code you will receive a CSS sprite, i.e. physically one graphic file, which will contain all the social media icons you need and RSS feed subscriptions (and Email, if required).

I chose four main networks and a couple of icons for subscribing to news with an icon size of 24 by 24, so my sprite looks like this (though I still got there, but it doesn't matter):

Now we have all the ingredients - links to groups or social media pages and icons to display on the site. It remains only to prepare all this correctly, i.e. layout. My blog is powered by WordPress, so I will paste the code with buttons into one of the. In my case, it is called sidebar.php. Html code it turns out to be extremely simple:

Well, and the most interesting thing. With the help, we determine which area of ​​our sprite will be displayed at this particular place as a background (in our case, this background is placed under the hyperlink). It takes a very long time to explain how this happens, so read the article on the link and everything will become clear (there are illustrative examples given). If you are lazy, then just experiment with the numbers, which, as you might have noticed, are not for nothing that are multiples of 24.

Yes, upload the sprite file to your site using FTP and specify the path to it in the background (). That's all. If it doesn’t work out that read carefully the materials on the above links, well, and if nothing works at all, then describe your situation in the comments (in detail - to insert the code, forget to enclose it in PHP tags with square brackets).

Good luck to you! See you soon on the pages of the blog site

You may be interested

As we continue to socialize our sites, it is often convenient for readers to receive blog updates directly on their favorite social network. Let's give them that opportunity. To do this, you need to register in these very social networks. You can create a profile of the administration or the author of the site, or you can create a public page for a company or project. In the future, it will be necessary to regularly publish news and site updates to the profile news feeds so that your subscribers can get acquainted with them. This, by the way, is convenient to do using the ones we installed earlier. We will design links to social profiles using CSS sprite or CSS sprites.

What are CSS sprites and sprites in general?

Sprites- a set of small pictures that are combined into one. This is done in order not to download 10-20 small lightweight images from the server to the user's computer, but to send them in one stream, combining them into one file. Sprites came to web design from the gaming industry, where they were used to create animated 2D graphics, for example, shooting monsters, etc.

In site design, a technique is also used in which various icons are combined into one file, for example, like this:

As you can see in this example, not only social media icons were collected in one file, but also other design elements, such as arrows, "like" buttons, etc. But combining absolutely all the graphics that are used on the site into one sprite is not entirely correct. It is better to divide the elements into groups and load only the necessary ones on a certain type of pages.

In this picture, I tried to schematically show how css sprites work. If the block is larger than the background image, then it is placed in the upper left corner by default, if no-repeat is set in the css styles. But we can change the position of the background image relative to the upper left corner of the block. This is especially useful if the block, for example, is equal in size to a single icon. We have seven icons, 32x32 each. They are located horizontally, so we do not need to change the position of the background vertically. We set the position of the background image -32 px, we get an icon in the block, -64 px - a Facebook icon, etc.

How to create link buttons for social media profiles?

After registering in the respective communities and in, I received links to profiles, the address of my RSS feed and a link to a subscription form to receive updates by mail. Then I combined them into the following code and pasted it into a text widget in the WordPress admin panel:

In the anchor of links, this code uses the tag : ... It is he who is the very block in which the desired icon is displayed. The shift of the background image is specified in the style file style.css through property background-position:

/ * Buttons to subscribe to updates * / .spmenu (padding: 0px; margin: 0px; color: # 4682B4; text-align: left; font-size: 100%;) .spmenu a, .spmenu a: hover (cursor: pointer; color: # 1E90FF; text-decoration: none; font-size: 100%;) .spmenu span (display: inline-block; width: 32px; height: 32px; background: url ("images / icons.png" ) no-repeat;) .spmenu span.sprite_gplus (background-position: 0px 0px;) .spmenu span.sprite_twitter (background-position: -32px 0px;) .spmenu span.sprite_fbook (background-position: -64px 0px;) .spmenu span.sprite_rss (background-position: -96px 0px;) .spmenu span.sprite_email (background-position: -128px 0px;)

Thus, for each element inside the class " spmenu»A background image is set icons.png which is a set of icons. Note that is an inline inline element according to the HTML specification, so in order to give it strict dimensions (width and height), we must change the way it is displayed to block-level in the CSS properties (line: display: inline-block;). The size of the 32x32 block matches the format of our icons.

Often instead of use tags , , etc., I think this approach is wrong. Why change the styles of standard tags when there is a universal one ... And the tag generally creates an extra request to the server, and we just, using sprites, are trying to reduce the number of these requests.

Where can I get the icons for the sprite?

1. Draw it yourself.
2. Search the search engine among the pictures.
3. There are special collections of icons on the web that are often given away for free.
4. Many social networks and services display official logos and icons on their websites that can be used in their applications.
5. To make a sprite file of social media icons automatically, you can use the service. Select the icons in the desired order, save the archive with the script, unpack and see the picture icons.png- ready sprite file.

In addition to displaying icons, sprites are useful when developing an animated menu, when, when you hover over its item, it either dims or lights up. Then, two sets of buttons are stored in the sprite file, and on the "mouse over" event they dynamically change the position of the background image using JS.

The menu of buttons-links to the channels for receiving updates, promised at the beginning of the note, is done, this is the end of the article. Subscribe to updates, the fun is just beginning.