How to add email icon on the sidebar and link it with my email add?

  • Author
  • #1334718


    I have downloaded and email icon and uploaded it on my media library,but don’t know how to add it from there to my sidebar where lies my other social icons,as i added the existing social icons through the Customize-Theme Options ,which doesn’t show any link for email..??

    Your help would be much appreciated!

    The blog I need help with is



    Hey there,

    That’s a difficult request there! Those social icons are part of the Adelle theme itself, and there is no mechanism to add a new icon next to them.

    An alternative would be to add your email icon as a widget, which would let you place it right between the social icons and your personal portrait. I know this isn’t what you’re asking, but it’s what’s feasible. For more on this, check out our Support page:

    Also, I’ve noticed, under Customizer > Theme Options, that you’ve set up your social links as links to images. Those options are meant for you to enter the links to your personal profiles on those social networks, so that when visitors click on your social icons they are taken to those profiles.



    @hobnobnoor: As you already know, the above reply is wrong: what you’re looking for is perfectly feasible.

    a) Go to Appearance > Customize > Theme Options and delete the URLs you’ve pasted, so that the icons we see now will disappear.
    b) Copy all the icons to your computer. (You don’t want the default ones of Adelle, do you?)
    c) If possible, use an image editing application to scale down the images to the desired pixel dimensions. For four icons in a row, something around 40×40 pixels would be ok. (This step isn’t strictly necessary, but it will mean better image quality and less coding).
    d) Upload each icon to your blog via Media > Add New, click Edit, copy its URL from the File URL field of the Save module.
    e) Go to Appearance > Widgets, add a Text widget to the top of the sidebar, and use this code in it (once for each icon):
    <a href="WEBPAGE URL HERE" target="_blank"><img src="IMAGE URL HERE" alt="DESCRIPTION HERE" /></a>
    Once you add the widget, we’ll see what CSS is required to adjust the positioning of the icons.



    That does work, yeah. Cheers @justpi.

    @hobnobnoor, that step c) is crucial if you want the final result to look good.



    @miguelcsf : Thank you! much appreciate your help..but the idea of linking social links with image links was just to see how the icons appear temporary though I knew I would end up changing them once I get the right support here,and there you go I am following the steps of justpi :) and figuring out better ways to have the social icons lined up right!! :)



    @ justpi : I did follow your steps above and if you see the site i pretty much achieved the steps to get the right icon however i am not so happy with the way the icon looks,as in i loved the default adelle icon i had which i linked previously through customize-theme options,is it possible to get those kind of icons in some other way?



    Well, you could copy and use those icons.
    But I don’t see what’s so special about those particular icons. There are countless sets of icons you could use. Here’s just one collection out of many:



    hey justpi!

    check out the site,I’ve successfully added the icons and thanks for sharing the website now!
    once again thank you for your are fab!
    Quick question: can I can I decrease the width of the sidebar?

    2.I want to decrease the width of the navigation bar, and how can I change the font of the menu bar which has Home,about me etc written and I want to remove the underline below it.



    You’re welcome.

    If you’d like to center the icons, add this:

    #text-2 {
        text-align: center;

    To decrease the width of the nav bar, add this:

    .navigation-main {
        margin-left: 10%;
        width: 80%;

    Change the 80% to adjust the width. If you change it, you must also change the left margin (must be half of the remaining percentage or the menu bar won’t be centered).

    To change the font, add this:

    #site-navigation .menu {
        font-family: FONT NAME HERE;

    To remove the underline:

    .navigation-main li:hover > a {
    text-decoration: none;

    You’ll be able to answer at least some of these questions yourself if you learn to use a developer extension, such as Web Inspector in Safari or Firebug in Firefox.



    Question 1 isn’t so simple.
    First, the main column and the sidebar don’t have a fixed width: they stretch and shrink to adapt to different screen resolutions and devices. Drag the browser window to make it narrower and see for yourself. When you say decrease the width, you mean keep it flexible or turn it into a fixed width?
    Second, if you decrease the width of the sidebar, what should that mean for the rest of the content? no other change, i.e. more space between main column and sidebar? or correspondingly wider main column? or narrower total width of the theme?

    Also, start a new thread about this please. This is a public forum, and the whole point of the forum is that Q&As should be available to others looking for the same answers, so don’t post any question in the same thread: the content of a thread should be related to its title.



    alright thank you justpi, I shall re post my not so simple question in another thread as I need to re frame my question now..:)

    Cheers :)

The topic ‘How to add email icon on the sidebar and link it with my email add?’ is closed to new replies.