seo Question posted in
Some basic information to get you started with this can be found here.

how to make widget sidebar icons? – SEO

please help me! i have spend 2 days to understand this condition 🙁

i found a website: http://www.wpbeginner.com, which have amazing widget icons in the sidebar lead to different pages.
then i tried to make something similar to it. i get their widget code.

<div class="guideicons">
    
    		
    <a href="http://www.wpbeginner.com/start-a-wordpress-blog/" class="guideicon starting">Starting a<br>Blog</a>
    		
    <a href="http://www.wpbeginner.com/wordpress-performance-speed/" class="guideicon speed">WordPress<br>Performance</a>
    		
    <a href="http://www.wpbeginner.com/wordpress-security/" class="guideicon security">WordPress<br>Security</a>
    		
    <a href="http://www.wpbeginner.com/wordpress-seo/" class="guideicon seo">WordPress<br>SEO</a>
    		
    <a href="http://www.wpbeginner.com/common-wordpress-errors-and-how-to-fix-them/" class="guideicon errors">WordPress<br>Errors</a>
    		
    <a href="http://www.wpbeginner.com/wp-tutorials/how-to-start-an-online-store/" class="guideicon store">Building an<br>Online Store</a>
    	
    </div>

now i want to understand 2 things

firstly as you can see he added this tag at the beginning then

” class=”guideicon starting”. guideicon +icon name = icon and it’s name which appears in the web page what he did to make it occur?

secondly the arrangement 2 columns each one have 3 icons how he did it it html5 through this simple code?

thank you so much

Tags:

2

Answers


  1. 0

    He has the width set to 47% in the class .sidebar a.guideicon. Because the width is set as 47% the width of the container, you cannot fit more than 2 icons across, so it overflows into the next row.

    Open the developer tools and play around with the width. If you set the width to something like 10%, it will all fit in the same row.

    Login or Signup to reply.
  2. 0

    Well if you inspect this sidebar you can see which class does what. In your case he uses the class guideicon to implement same style accros all the a tags in this sidebar with the rule .sidebar a.guideicon. And after that he uses the second class e.g speed to ad an icon whith the :before pseudo selector to add an icon from their icon pool with this 2 rules: content: "f00b"; & font-family: Wpbeginner;. This is how Font Awesome was working(I am not sure if it still works like this nowadays).

    If you want add you own icons like this you should just need to do something like this:

    https://codepen.io/anon/pen/ZRJPEv

    I hope i helped

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search