widget sidebar icons

Question

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 <div class="guideicons"> 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

Answer 1

this is wordpress :-|

you can perform this with javaScript or jQuery

you can access the tag (div, a) by its class name : document.getElementsByClassName("guideicons");

https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

or use ID instead of class

https://www.w3schools.com/jsref/met_document_getelementbyid.asp