如何在 django cms 图标中使用自定义网络字体 包括预配置的字体包括自定义字体

如何解决如何在 django cms 图标中使用自定义网络字体 包括预配置的字体包括自定义字体

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

配置

此插件为所有实例提供了一个 default 模板。您可以提供 通过添加 DJANGOCMS_ICON_TEMPLATES

设置::

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

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

django CMS Icon 插件默认带有 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',('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'),]

解决方法

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

包括预配置的字体

在 assets.html 的 the official repository 中提供了一个 djangocms_icon/templates/admin/djangocms_icon/includes/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 模板的标题中），以便图标也显示在内容中。