menu icons – how to link the icons themselves?

  • Unknown's avatar
    moshekahol · Member ·

    Hi I added two icons to my menu (login and call) but the link is only for the text under them… how can I make the link also for the icons?

    thanks!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    innisfreehomestead · Member ·

    Hello there!

    You need to set the icon as :before the a tag, then it will be included in the link like so: 

    li.menu-item-2540 a:before {
	content: 'f304';
	font-family: genericons;
	color: #000;
	font-size: 2.3em;
	margin-left: auto;
	position: relative;
	right: 9px;
	bottom: -15px;
	display: block;
}

li.menu-item-2814 a:before {
	content: 'f50c';
	font-family: genericons;
	color: #F40009;
	font-size: 1.9em;
	margin-left: auto;
	position: relative;
	right: 17px;
	bottom: -10px;
	display: block;
}

    I also set the icon to display: block otherwise it overlaps the text, and changed the bottom px amount to give some more space.

    Hope that helps,
    Sage

  • The topic ‘menu icons – how to link the icons themselves?’ is closed to new replies.