如何在 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_SETS 列出的选项。

此外 您需要加载 /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

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

包括预配置的字体

在 djangocms_icon/templates/admin/djangocms_icon/includes/assets.html 的 the official repository 中提供了一个 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/admin/djangocms_icon/includes/assets.html 的 templates 文件夹中（它会覆盖模板的默认值），
添加另一个 <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 class 加上单独的 classes图标：

@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";
}

...

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

{
  "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 模板的 header 中），以便图标也显示在内容中。

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

How can I use custom web fonts in django cms icons

python-3.x

django

content-management-system

font-awesome

django-cms

配置

包括预配置的字体

包括自定义字体