如何在 django cms 图标中使用自定义网络字体

Question

我的问题是/admin/djangocms_icon/includes/assets.html 文件是什么样的？假设我使用的是 font awesome 5，有人可以提供示例吗？以下是我在 Github 上遵循的配置设置。

配置

此插件为所有实例提供default 模板。您可以提供 通过添加DJANGOCMS_ICON_TEMPLATES 来选择更多模板

设置::

DJANGOCMS_ICON_TEMPLATES = [
    ('svg', 'SVG template'),
]

网页字体图标 ##############

django CMS 图标插件默认附带 Font Awesome 4。这个可以 通过覆盖以下设置进行更改::

DJANGOCMS_ICON_SETS = [
    ('fontawesome4', 'fa', 'Font Awesome 4'),
]

在上面的例子中使用 Font Awesome 5；请参阅DJANGOCMS_ICON_SETSlisted 中的以下选项。

此外，您需要在/admin/djangocms_icon/includes/assets.html 中加载字体资源。将此文件添加到您的项目中 以便图标选择器在管理员中选择您的自定义图标。

图标选择器支持numerous font libraries <http://victor-valencia.github.io/bootstrap-iconpicker/> 盒子外面。您还可以像这样添加多个字体集::

DJANGOCMS_ICON_SETS = [
    ('elusiveicon', 'el', 'Elusive Icons'),
    ('flagicon', 'flag-icon', 'Flag Icons'),
    ('fontawesome4', 'fa', 'Font Awesome 4'),
    ('fontawesome5regular', 'far', 'Font Awesome 5 Regular'),
    ('fontawesome5solid', 'fas', 'Font Awesome 5 Solid'),
    ('fontawesome5brands', 'fab', 'Font Awesome 5 Brands'),
    ('fontawesome5light', 'fal', 'Font Awesome 5 Light', 
    '5.3.1_pro'),
    ('glyphicon', 'glyphicon', 'Glyphicons'),
    ('ionicon', 'ion', 'Ionicons Icons'),
    ('mapicon', 'map-icon', 'Map Icons'),
    ('materialdesign', 'zmdi', 'Material Design'),
    ('octicon', 'octicon', 'Octicons'),
    ('typicon', 'typcn', 'Typicons'),
    ('weathericon', 'wi', 'Weather Icons'),
]

Answer 1

我只需要自己解决这个问题。这取决于您是尝试包含预配置的字体还是您自己的字体。

包括预配置的字体

the official repositorydjangocms_icon/templates/admin/djangocms_icon/includes/assets.html 提供了一个 assets.html 的示例，它实际上链接到 Font Awesome 5（特别是 5.3.1）：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

为了包含另一种字体：

• 将assets.html 文件复制到templates 文件夹中的templates/admin/djangocms_icon/includes/assets.html（它会覆盖模板的默认值），
• 添加另一个 <link> 指代您选择的（外部或本地）字体，
• 通过复制文档中的相应元素，在 settings.py 的 DJANGOCMS_ICON_SETS 中添加引用。

包括自定义字体

对于自定义字体，它有点复杂。就我而言，我只有一个带有自定义图标的 .ttf 文件，没有 CSS。在这种情况下，assets.html 看起来像这样：

{% load static %}

<link rel="stylesheet" href="{% static 'css/icons/my_icons.css' %}">

在my_icons.css 中，包含带有@font-face 规则的字体，并为每个图标添加一个通用的myicon 类和单独的类：

@font-face {
    font-family: "My Icons";
    font-weight: normal;
    font-style: normal;

    src: url("../../fonts/MyIcons.ttf") format("truetype");
}

.myicon {
  font-family:"My Icons";
  font-style: normal;
  font-size: inherit;
}

.myicon-A:before {
  content:"A";
}
.myicon-B:before {
  content:"B";
}
.myicon-C:before {
  content:"C";
}

...

接下来，在static/js/my_icons.js（或任何你想要的地方）放置一个 JSON 文件，其中包含所有图标类的列表：

{
  "iconClass": "myicon",
  "icons": ["myicon-A",
            "myicon-B",
            "myicon-C",
            "myicon-D",
            ...
            ]
}

（为了生成所有可能的符号，我在 MacOS 的字体管理器中打开了字体，用 cmd-A/cmd-C 复制了所有字形 - 它们实际上只是字母 - 并用它用简短的 Python 生成规则脚本。）

最后，在您的 settings.py 中，您加载 JSON 并设置对您的自定义字体的引用：

with open('path/to/static/js/my_icons.js')) as iconfile:
    MY_ICON_SET = iconfile.read()


DJANGOCMS_ICON_SETS = [
    (MY_ICON_SET, # = the content of the JSON file
     'myicon',    # = the css class
     'My Icons'   # = the label in the admin interface
     ),
]

应该是这样的。不要忘记在您的网站中包含您的自定义字体（例如，在您的 base.html 模板的标题中），以便图标也显示在内容中。