Facebook icon in css

border: 0px sospand transparent;

div.submenu span a:hover i.fa::before

div.submenu span a:hover i.fa-facebook::after

div.submenu span a:hover i.fa-twitter::after

div.submenu span a:hover i.fa-vk::after

div.submenu span a:hover i.fa-instagram::after

facebook svg

Следующим пунктом разберем иконку facebook в формате svg код :

Иконка facebook svg

Вообще иконок facebook svg — огромное количество! Я не смогу составить конкуренцию специализированным сайтам по иконкам, но некоторые возможности стилизации данных иконок, надеюсь, вам будут полезны.

Иконка логотип facebook на черном фоне

Простой код facebook svg:

Очень простая стилизация facebook svg

fill: #050505; transition: 1s;

И вторая иконка facebook svg:

Абсолютно по такому же принципу:

иконка facebook png

Но вообще, сейчас, сегодня, я не стал бы заморачиваться с форматом png, либо с любым подобным форматом картинки — просто потому, что это одна большая проблема.

Другие типы и виды иконок прекрасно и просто стилизуются и мороки там в 10 раз меньше!

Но тем не менее. что мы можем сделать, если у нас вот такая иконка facebook в формате png.

Добавим немного стилей и получим:

Источник

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.

COLOR PICKER

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 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.

Источник

Font Awesome Facebook Icon (FB)

Facebook Icon refers to defined as an online social networking website where people can create profiles, share information about themselves such as photos and quotes, and reply to or link to information posted by others. An example of an online social networking website is Facebook. This font awesome icon is also known as «fa-Facebook» or «fa fa Facebook».

Facebook Icon is given below. You can use this icon on the same way in your project. First make sure you have added Font Awesome Icon library. If this library is added just add the HTML css class fa fa-facebook to any element to add the icon. Font Awesome facebook Icon can be resized as per your need. You can manage size of icon(fa fa facebook) by using font-size css style.

You can get steps to add HTML icon Facebook in Web, Font Awesome and other framwork.

How to add Font Awesome facebook Icon ?

Font Awesome Icon fa fa facebook Icon can be added to any web page simply as below.

Fontawesome Version 4.X

facebook

You can integrate Icon in web pages by just adding following below syntax & icon code.

HTML Code

Get complete html code for icon facebook

Font Awesome Icon facebook Icon | fa fa facebook | HTML, CSS

Adding Font Awesome Icon HTML Facebook( fa fa-facebook ) in web project is very simple. You need to add the icon class along with material-icons, it is basically main class and mandatory for icons so do not forget to add this class. You can customize Font Awesome Icon facebook Icon Facebook as per your requirement, suppose that you need to chnage the color of Facebook icon or change the size of size. It is pretty simple to change color of icon Facebook just add style=»color:red» it will make font color red. On the same way you can change size of Facebook icon by just adding style=»font-size:50px;». Smililarly you can add border color, shadow and other font styles to Facebook. Hope this icon fullfilled your need. Thanks for visiting us.

Change Font Awesome Icon Icon Facebook Color

Sometimes we need icons in different color, as we suggested by adding css style we can change color. Here we have created one example to change color of icons with css classes.

Output of the above example will be as below-

Источник

How to Make a Facebook Icon Using Only CSS & HTML (no images)

Let’s say you want to include a Facebook icon on your web page, so everyone can share the sheer awesomeness that it is. The only thing is, you’re really concerned about forcing users to download images, or maybe you don’t want to upset the almighty Google Pagespeed by adding anything to the page at all that might slow things down.

Well it just so happens that I’ve come up with a way to create the Facebook icon without any images at all, using just one HTML element and around 500 bytes of CSS (ie, not that much).

You can follow the link above to grab the HTML & CSS all for yourself, but I’ll provide a little writeup of what we’re doing here. It’s all basic CSS, but might be a good primer for beginners.

The HTML

Keeping our HTML simple is all the rage these days. We could have perhaps done this more easily with more tags, but did you know that with pseudo elements in CSS, one tag actually becomes three usable blocks?

That moves us on to our CSS…

The CSS

As mentioned above, using .logo:before and .logo:after CSS means we’ve got three different tags to work with instead of just one. When I look at Facebook’s icon, I see essentially three boxes, as per the sketch below:

Firstly, we create the main blue box, give it a little roundness to the edges, and make sure nothing that drifts outside of that box will be shown. Here’s the code I used with some inline comments to clarify exactly what’s going on:

.logo <
background: #4661b0; /* make it «Facebook blue» */
text-indent: -999em; /* Back the actual text in the paragraph tag out of the element */
width: 100px; /* Make it nice and big */
height: 110px; /* The tag is 10px larger because of how we’re handling the borders below */
border-radius: 3px; /* for that oh so important modern look */
position: relative; /* so we can position our other elements absolutely */
overflow: hidden; /* so we can hide any overflow those elements will have */
border: 15px solid #4661b0; /* so we can make it look like the F is not butting up against the right side of the box */
border-bottom: 0; /* removing the border here though, because the F does touch the bottom of the box */
>

Now lets move on to the “F” itself, which is created using both of our pseudo elements. First, the main trunk of the letter:

.logo:before <
content: «/20»; /* Psuedo elements need something for content, this means a blank space */
position: absolute; /* So we can position it exactly where we want it */
background: #4661b0; /* make the box the same Facebook blue */
width: 40px; /* setup the right width, which actually extends the box outside of the containing element (along with our positioning below) */
height: 90px; /* this also extends the trunk outside of the main box */
bottom: -30px; /* as mentioned above, we pull the box we’re using to create the trunk of the F down to hide some of it, because it will have rounded corners on all sides */
right: -37px; /* similar to what we’re doing with bottom above */
border: 20px solid white; /* make the remaining visible border white and thick enough to look right */
border-radius: 25px; /* now give the top right visible corner the necessary curve */
>

All we need now is the crossing bar to complete the “F”.

.after <
content: «/20»; /* again, pseudo elements need content to be visible */
position: absolute; /* and we’re going to want to position absolutely */
width: 55px; /* the desired width of the box to make the bar long enough */
top: 50px; /* set it in the proper location */
height: 20px; /* make it thick enough */
background: white; /* and the right color */
right: 5px; /* then back it up from the edge of the containing block a bit */
>

What We’ve Got Here…

Hey it

I cover a lot of Woocommerce and Gravity Forms stuff, too.

I use Siteground WordPress hosting, and can’t recommend them enough. I’ve used the expensive, “managed WP” guys and Siteground simply provides everything they do, at a significantly more reasonable price.

When I’m not doing this web design stuff, I live in a van with my family, travel full-time and write for Wand’rly and Campendium.

Discussion

Hey man… Not only was your explanation super easy, it also made me understand the concept behind CSS icons. Awesome job!
Dominik

Thanks, Nathan for this great tutorial! I gently tweaked your awesome CSS, to arrive at an icon that is very close to the actual Facebook icon. I also reduced the size, somewhat. Here’s the CSS:

.logo <
background: #4661b0;
text-indent: -999em;
width: 37px;
height: 45px;
border-radius: 7px;
position: relative;
overflow: hidden;
border: 8px solid #4661b0;
border-bottom: 0;
margin-left: .5em;
>
.logo:before <
content: «/20»;
position: absolute;
background: #4661b0;
width: 14px;
height: 40px;
bottom: -11px;
right: -14px;
border: 8px solid white;
border-radius: 11px;
>
.logo:after <
content: «/20»;
position: absolute;
border-top: 8px solid #FFF;
border-left: 0px solid transparent;
border-right: 1px solid transparent;
height: 0;
width: 22px;
top: 17px;
right: 0px;
>

Tod

Cool, Tod! Here’s a screenshot of Tod’s results for those who are interested.

Источник

Font Awesome facebook f Icon

Font Awesome Facebook f Icon refers to defined as an online social networking website where people can create profiles, share information about themselves such as photos and quotes, and reply to or link to information posted by others. This font awesome icon is also known as «fa-Facebook f» or «fa fa Facebook f».

Facebook f Icon is given below. You can use this icon on the same way in your project. First make sure you have added Font Awesome Icon library. If this library is added just add the HTML css class fa fa-facebook-f to any element to add the icon. Font Awesome facebook f Icon can be resized as per your need. You can manage size of icon(fa fa facebook f) by using font-size css style.

You can get steps to add HTML icon Facebook f in Web, Font Awesome and other framwork.