如何制作小部件侧边栏图标？

Question

请帮我！ 我花了2天的时间来了解这种情况：(

我找到了一个网站： http : //www.wpbeginner.com ，其中的侧边栏中有令人惊叹的小部件图标，可指向不同的页面。 然后我试图做类似的事情。 我得到了他们的小部件代码。

 <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> 

现在我想了解两件事

首先，您可以看到他在开头添加了此标签，然后

“ class =” guideicon starting“。guideicon + icon name =图标，它的名称出现在网页上是他做了什么？

其次，排列2列每一个都有3个图标，他是如何通过这个简单的代码将其HTML5编码的呢？

非常感谢

Answer 1

在.sidebar a.guideicon类中，他的宽度设置为47％。 由于宽度设置为容器宽度的47％，因此不能容纳超过2个图标，因此它会溢出到下一行。

打开开发人员工具，然后按一定宽度播放。 如果将宽度设置为类似10％的宽度，则所有宽度都适合在同一行中。

Answer 2

好吧，如果您检查此侧边栏，则可以看到哪个类在做什么。 在您的情况下，他使用类guideicon来实现相同的样式，并使用.sidebar a.guideicon规则在此侧栏中添加所有a标签。 之后，他使用第二类，例如speed ，通过:before伪选择器通过以下两个规则从图标池添加图标content: "\\f00b"; ： content: "\\f00b"; ＆ font-family: Wpbeginner; 。 这就是Font Awesome的工作方式（我不确定现在是否仍然可以像这样工作）。

如果要添加自己的图标，则只需要执行以下操作：
https://codepen.io/anon/pen/ZRJPEv

我希望我能帮助