使用Bootstrap Glyphicons和WordPress Dashicons创建主题

时间：2014-12-02 作者：Michael Ecklund

我在我的WordPress主题中混合使用引导图示符图标和WordPress Dashicons。

然而，真正让我头疼的是，WordPress Dashicons似乎无法根据不同的HTML元素（更具体地说，字体大小的差异）进行适当的缩放。

例如，如果您有标题1。。。

引导图示符图标

Programmatically looks like:

<h1><span class="glyphicon glyphicon-folder-open"></span> Gallery</h1>

Visually looks like:

WordPress短划线图标

Programmatically looks like:

<h1><span class="dashicons dashicons-portfolio"></span> Gallery</h1>

Visually looks like:

为什么WordPress Dashicons不能正确缩放？我希望能够同时使用两者WordPress Dashicons 和Bootstrap Glyphicons 在我的WordPress themes, 但总是要手动调整所使用的每个图标的WordPress Dashicons，使其与每个元素和媒体查询进行适当的缩放，这真的很烦人。

是否有一个全局CSS修复程序可以应用于所有WordPress Dashicons，以便它们的行为类似于引导图示符图标，而不会破坏WordPress中使用WordPress Dashicons的其他区域？

4 个回复

最合适的回答,由SO网友:Michael Ecklund 整理而成

我看了一下Bootstrap的GlyphiconCSS 和WordPress的DashiconCSS 并制定了一个调整方案。

引导图示符图标`CSS`

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: \'Glyphicons Halflings\';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

WordPress短划线图标CSS

.dashicons {
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 1;
    font-family: dashicons;
    text-decoration: inherit;
    font-weight: 400;
    font-style: normal;
    vertical-align: top;
    text-align: center;
    -webkit-transition: color .1s ease-in 0;
    transition: color .1s ease-in 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

WordPress短划线图标CSS （已调整）

body .dashicons {
    font-size: inherit !important;
    height: auto !important;
    position: relative !important;
    text-align: inherit !important;
    top: 1px !important;
    vertical-align: top !important;
    width: auto !important;
}

在添加Tweaked WordPress Dashicons CSS 访问您的网站。你可能想用钩子把它打印出来(wp_print_styles), 或者你可以CSS 归档并排队(wp_enqueue_scripts). 无论哪种方式，无论你决定走哪条路线，都要确保CSS “调整”仅应用于前端。

我很确定在后端使用它是安全的，但我只需要在前端进行这些调整，那么为什么还要费事在后端使用WordPress可以正常工作的东西呢？

如果您决定使用此CSS 调整一个WordPress插件，确保只在插件使用的页面上打印或排队，而不是在整个后端进行全局打印。

不管怎样，给你。解决了我自己的问题。希望这对其他人有帮助。

Side note:

一些使用WordPress Dashicons的区域需要后面有空格，而有些区域则不需要。然而，引导图示符图标90%的时候看起来很好，后面总是有空格。我认为这取决于图标缩放到的字体大小。我想这是情境性的。你要注意这一点。

再一次视觉上。。。

一零 Bootstrap Glyphicon 九

WordPress Dashicon (Not using tweaked CSS)

WordPress Dashicon (Using tweaked CSS)

P.S. WordPress Dashicons仅在用户登录时可用。如果用户未登录，您想在WordPress主题中使用WordPress Dashicons，则需要将其排队。Like this: wp_enqueue_style( \'dashicons\' );

SO网友:NateWr

可以使用em size使dashicons相对于其包含元素的字体大小进行缩放。这应该可以做到：

.dashicons:before {
    width: 1em;
    height: 1em;
    font-size: 1em;
}

那么如果你的<h1> 元素的字体大小为48px, 您的dashicon也会。

SO网友:gmazzap

您可以使用wp_add_inline_style 将一些css附加到dashicon样式。

每次通过以下方式添加dashicons css时都使用该函数wp_enqueue_script 您可以自动附加一些css，从而修改默认样式。

类似于：

add_action(\'wp_enqueue_scripts\', function() {
    wp_add_inline_style(
        \'dashicons\',
        \'.dashicons { font-size:inherit; line-height:inherit; display:inline-table; }\'
    );
}, 999);

在函数中放置什么css在这里是无关紧要的，但上面给出的示例应该是一个很好的起点。

请注意\'wp_enqueue_scripts\' 不会在后端激发，因此代码不会影响您的管理页面。

SO网友:coopersita

正如我在评论中提到的，仪表板图标是仪表板菜单的一部分，因此其大小非常明确：

.dashicons-before:before {
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 1;
    font-family: dashicons;
    text-decoration: inherit;
    font-weight: 400;
    font-style: normal;
    vertical-align: top;
    text-align: center;
    -webkit-transition: color .1s ease-in 0;
    transition: color .1s ease-in 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

请注意宽度、高度和字体大小。如果我是你，我会创建自己的类，该类使用相同的字体系列，但使用glyphicon类来调整大小：

.my dashicon{字体系列：dashicons！重要；}

然后像这样使用：

<h1><span class="glyphicons my-dashicos dashicons-portfolio"></span> Gallery</h1>

我无法测试上面的代码，所以它可能不起作用，但它可能会让您知道从哪里开始。

结束

小码农CODE

使用Bootstrap Glyphicons和WordPress Dashicons创建主题

引导图示符图标`CSS`

相关推荐

Metabox有没有标准的HTML标记？

使用Bootstrap Glyphicons和WordPress Dashicons创建主题

引导图示符图标CSS

相关推荐

Metabox有没有标准的HTML标记？

引导图示符图标`CSS`