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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (73)

请帮帮我!我花了两天时间来了解这个情况:

我找到了一个网站:网址:http:/www.wpnenener.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=”Guide图标开始“。Guide图标+图标名称=图标,它的名字出现在网页上,他做了什么使它发生?

其次,排列2列,每个列都有3个图标,他是如何通过这个简单的代码实现HTML 5的?

非常感谢

提问于
用户回答回答于

如果你检查这个侧边栏,你可以看到哪个类做了什么。在你的例子中,他使用这个类guideicon若要实现相同的样式,请将a在这个边栏中带有规则的标记.sidebar a.guideicon。在那之后,他使用了第二个类,例如speed广告中的图标:before使用以下2条规则从图标池中添加图标的伪选择器:content: "\f00b";&font-family: Wpbeginner;。这就是字体Awome的工作原理(我不确定它现在是否还像这样工作)。

如果你想要添加像这样的自己的图标,你只需要做如下操作:

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

我希望我能帮上忙

用户回答回答于

他的宽度设置为47%,在这个类中。因为宽度设置为容器宽度的47%,所以不能跨出两个以上的图标,因此会溢出到下一行。

打开开发人员工具,在宽度上进行播放。如果你将宽度设置为10%左右,则所有宽度都将在同一行中。

扫码关注云+社区

领取腾讯云代金券