Question

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

我找到了一个网站：http://www.wpbeginner.com，它在侧边栏中有惊人的小部件图标，导致不同的页面。然后我试着做一些类似的东西。我得到他们的小部件代码。

＆＃13;

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

＆＃13;

现在我想了解两件事

首先，你可以看到他在开头添加了这个标签

＆＃34; class =＆＃34; guideicon starting＆＃34;。 guideicon + icon name = icon以及它在网页上显示的名称是什么让它发生？

其次排列2列每个都有3个图标他是如何通过这个简单的代码html5做的？

非常感谢你

Answer 1

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

打开开发人员工具并使用宽度。如果将宽度设置为10％，则它们将全部放在同一行中。

Answer 2

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

如果你想添加你自己的图标，你应该只需要这样做：
https://codepen.io/anon/pen/ZRJPEv

我希望我帮助

如何制作小工具侧边栏图标？

2 个答案: