如何制作小工具的侧边栏图标？
如何制作小工具的侧边栏图标？
提问于 2018-06-15 05:11:12
请帮帮我!我花了两天的时间来了解这种情况：
我找到了一个网站：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=”向导图标开始“.向导图标+图标名称=图标和它的名称出现在网页上他做了什么使它发生？
其次，排列2列，每列有3个图标，他是如何通过这个简单的代码html5完成的？
非常感谢
回答 2
Stack Overflow用户
发布于 2018-06-15 05:39:03
他在.sidebar a.guideicon类中将宽度设置为47%。因为宽度被设置为容器宽度的47%，所以不能容纳超过2个图标，因此它会溢出到下一行。
打开开发人员工具，调整宽度。如果将宽度设置为10%左右，它们将全部放在同一行中。
Stack Overflow用户
发布于 2018-06-15 06:02:42
如果你查看这个侧边栏，你可以看到哪个类做了什么。在您的示例中，他使用类guideicon来实现相同的样式，并使用规则.sidebar a.guideicon访问此侧栏中的所有a标记。然后，他使用第二个类，例如speed来添加一个图标，使用:before伪选择器从他们的图标池中添加一个图标，规则如下：content: "\f00b"; & font-family: Wpbeginner;。这就是Font Awesome是如何工作的(我不确定它现在是否还像这样工作)。
如果你想像这样添加你自己的图标，你只需要这样做：
https://codepen.io/anon/pen/ZRJPEv
我希望我能帮上忙
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50866006
复制相关文章
相似问题