NexT 主题配置小记

1 EOT字体与NexT Icon

EOT字体是一种在WEB端显示的字体文件，next使用的大部分icon都封装在”themes/next/source/lib/font-awesome/fonts/“目录下的fontawesome-webfont.eot字体文件中

这里以next本身menu icon的使用为例

样式配置文件中代码如下：

_config.yml

1 2	menu: home: / \|\| home

编译样式时会调用”themes/next/layout/_partials/header/“下的”menu-item.swig”文件

/* menu-item.swig */
{%- set menuIcon = '' %}
{%- if theme.menu_settings.icons %}
  {%- set menuIcon = '<i class="fa fa-fw fa-' + value.split('||')[1] | trim + '"></i>' %}
{%- endif %}
{%- set menuText = __('menu.' + name) | replace('menu.', '') %}
...

可以看出，结合_config.yml中的home字段，最终在界面中生成了如下样式

1	<i class="fa fa-fw fa-home"></i>

再对照next样式文件font-awesome.css中的内容

font-awesome.css

...
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
...
.fa-home:before {
  content: "\f015";
}
...

最终从fontawesome-webfont.eot字体文件中取出了015号文字来作为菜单栏上home选项的icon

EOT文件查看方式