Web_Designer_Issue_262_2017

Tutorials
Code social media buttons for WordPress
8. Default menu display
Your new menu should now appear in your layout in the
area you selected. It will currently be in the style of the
other menus, with text and not icons. The generated
markup, depending on your theme, will look similar to this
(additional IDs and classes added by WordPress have
been omitted for clarity).
Facebook
Twitter
[...]
9. Start styling
You can now add CSS to your theme files, or in
WordPress 4.7 and above, you can add CSS via the
Additional CSS theme options. Go to
Appearance>Customise in the Admin panel and open the
Additional CSS tab. CSS saved here will apply only to this
theme, and will not edit your theme files.
FontAwesome is
an icon font
They scale to any size, big or small! They are great
for all screen types: desktop and mobile. They’re
also tiny in file size so they load faster than
images and can be recoloured with CSS!
10. Align buttons side by side
Start by adding styles for all the buttons as a basis for
customising each individual link. This code will start by
aligning your buttons side by side. Depending on your
theme you may need to make adjustments.
#menu-social-media-menu .social-button {
display: inline-block;
box-sizing: border-box;
padding: 0;
border: 0;
}
11. Turn text into button shapes
Add block and background to the anchor links with width
and height settings to make the base shape. Use a tall line
height and hide the overflow to hide the text out of the
viewport while still making it available to screen-readers.
Add a margin to put some space between buttons.
#menu-social-media-menu .social-button > a {
display: block;
background: #555;
height: 30px;
width: 30px;
overflow: hidden;
line-height: 200px;
margin: 0px 3px;
position: relative;
}
12. Add some style
Give your buttons some panache! Set the border
radius to 100% to make circles. Transition and transform
can give your hover states a bit of a zoom and
background colour change. This continues on from the
last step’s additions.
#menu-social-media-menu .social-button > a {
[...]
transition: all 0.2s;
border-radius: 100%;
}
#menu-social-media-menu .social-button >
a:hover {
transform: scale(1.2);
background: #ccc;
}
13. Add icon placeholder
Now create the placeholder for the icon using the :after
pseudo class. This will create a fake element using CSS
that overlays your buttons, similarly to a div that we can
style and add the icon to.
#menu-social-media-menu .social-button >
a:before {
content: “\f00d”;
font-family: “FontAwesome”;
font-size: 14px;
transform: rotate(0.001deg); /* IE Fix */
color: #000;
position: absolute;
width: 30px;
line-height: 30px;
text-align: center;
}
Top left
The list of FontAwesome icons is available at
fontawesome.io/icons. There are many icon types
available, not just social media logos
Top right
Use the search function to refine the view to a
specific icon or scroll down to Brand Icons to see
all site brand logos
Right
Click the icon to expand the full view. The unicode code
that you need for CSS is in the grey bar just under the
different sizes
62