Support Bereich Hier finden Sie Antworten auf alle Fragen zu Ihrem Xobor Forum.
Wählen Sie zunächst einen Hilfe-Bereich.

<!--
// Code zum ueben und nachschlagen wie man Icon-Fonts und SVG-Icons
// in HTLM einsetzen kann.
// In Xobor Foren mit Template V6 und in der mobile Ansicht von V1 bis V4
// sind Icon-Fonts schon vorhanden. Hilfe findet man im Wiki unter
// https://www.hpm-support.de/wiki:icons-v6
// In den Templates V1 bis V4 kann man Vektor Icons mit svg einsetzen die
// man mit css formatieren kann
//
// Autor: Mike48
// Anschauen: https://www.friends-of-xobor.de/test_svg_use.html
//
-->
<style>
  {{template==177.start}}
  /* begin - style fuer V6 */
  .txt_box_1 .xob.xob-attach,
  .txt_box_3 .xob.xob-attach {
    font-size: 24px;
    color: black;
  }
  .txt_box_2 .xob.xob-attach,
  .txt_box_4 .xob.xob-attach {
    color: blue;
    font-size: 24px;
  }
  .txt_box_1 .xob.xob-attach:focus,
  .txt_box_1 .xob.xob-attach:hover,
  .txt_box_3 .xob.xob-attach:focus,
  .txt_box_3 .xob.xob-attach:hover {
    font-size: 28px;
    color: red;
  }
  .txt_box_2 .xob.xob-attach:focus,
  .txt_box_2 .xob.xob-attach:hover,
  .txt_box_4 .xob.xob-attach:focus,
  .txt_box_4 .xob.xob-attach:hover {
    font-size: 28px;
    color: green;
  }
  .txt_box_1 .xob.xob-attach:active,
  .txt_box_3 .xob.xob-attach:active {
    font-size: 24px;
    color: #FF00FF;
  }
  .txt_box_2 .xob.xob-attach:active,
  .txt_box_4 .xob.xob-attach:active {
    font-size: 24px;
    color: #FF00FF;
  }
  /* end - style fuer V6 */
  {{template==177.end}}
 
  {{template!==177.start}}
  /* begin - style fuer V1 bie V4 */
  #svg_lager .svg-icon {
    fill: currentColor;
  	width: 24px;
  	height: 24px;
  }
  #tmp_1 .svg-icon,
  #tmp_3 .svg-icon {
    fill: black;
  	width: 24px;
  	height: 24px;
  }
  #tmp_2 .svg-icon,
  #tmp_4 .svg-icon {
    fill: blue;
  	width: 24px;
  	height: 24px;
  }
  #tmp_1 .svg-icon:focus,
  #tmp_1 .svg-icon:hover,
  #tmp_3 .svg-icon:focus,
  #tmp_3 .svg-icon:hover {
  	fill: red;
  	width: 26px;
  	height: 26px;
  }
  #tmp_2 .svg-icon:focus,
  #tmp_2 .svg-icon:hover,
  #tmp_4 .svg-icon:focus,
  #tmp_4 .svg-icon:hover {
  	fill: green;
  	width: 26px;
  	height: 26px;
  }
  #tmp_1 .svg-icon:active,
  #tmp_3 .svg-icon:active  {
  	fill: #FF00FF;
  	width: 24px;
  	height: 24px;
  }
  #tmp_2 .svg-icon:active,
  #tmp_4 .svg-icon:active {
  	fill: #FF00FF;
  	width: 24px;
  	height: 24px;
  }
  {{template!==177.end}}
  .icon_box {
    margin-left: 10em;
    border: 2px solid black;
    padding: 2em;
  }
  .inline {
    display: inline-block;
    vertical-align: middle;
    height: 3em;
    padding-right: 2em;
  }
  .text_box {
    margin-top: 2em;
  }
  /* end - style fuer V1 bie V4 */
</style>
 
{{template==177.start}}
<!--
  icon-font Büroklammer im V6
  Wird formatiert wie Text
-->
 
<!-- begin - versteckter lager-ordner für die svg daten -->
<div id="svg_lager" style="display: none">
  <span class="xob xob-attach">
</div>
<!-- end - versteckter lager-ordner für die svg daten -->
 

<div class="icon_box">
  <h3>Für V6 mit Icon-Font</h3>
  <div class="txt_box_1">
    <div class="inline">Hier erscheint die Büroklammer: <span class="xob xob-attach"></span></div>
  </div>
 
  <div class="txt_box_2">
    <div class="inline">Hier erscheint die Büroklammer: <span class="xob xob-attach"></span></div>
  </div>
</div>
 
<div class="icon_box">
  <h3>Für V6 mit Icon-Font einfügen mit JS/JQ</h3>
  <div class="txt_box_3">
    <div class="inline">Hier erscheint die Büroklammer: </div>
  </div>
 
  <div class="txt_box_4">
    <div class="inline">Hier erscheint die Büroklammer: </div>
  </div>
</div>
 
{{footerjs.start}}
  {{footerjs}}
  /*
   * svg mit JQuery einfuegen
   * script in footer
   */
  $('#svg_lager .xob.xob-attach').clone().appendTo('.txt_box_3 .inline');
  $('#svg_lager .xob.xob-attach').clone().appendTo('.txt_box_4 .inline');
{{footerjs.end}}
{{template==177.end}}
 
{{template!==177.start}}
<!--
  Büroklammer mit svg im V1 bis V4
-->
 
<!-- begin - versteckter lager-ordner für die svg daten -->
<div id="svg_lager" style="display: none">
  <svg xmlns="http://www.w3.org/2000/svg" >
    <!--!Font Awesome Free 6.5.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.-->
    <symbol id="icon_bueroklammer" viewBox="0 0 448 512">
      <path d="M364.2 83.8c-24.4-24.4-64-24.4-88.4 0l-184 184c-42.1 42.1-42.1 110.3 0 152.4s110.3 42.1 152.4 0l152-152c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-152 152c-64 64-167.6 64-231.6 0s-64-167.6 0-231.6l184-184c46.3-46.3 121.3-46.3 167.6 0s46.3 121.3 0 167.6l-176 176c-28.6 28.6-75 28.6-103.6 0s-28.6-75 0-103.6l144-144c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-144 144c-6.7 6.7-6.7 17.7 0 24.4s17.7 6.7 24.4 0l176-176c24.4-24.4 24.4-64 0-88.4z stroke="#cf142b" />
    <symbol>
 
  </svg>
    <!-- das iccn als vorlage zum einfuegen ins html mit JS / JQ -->
    <svg class="svg-icon" ><use href="#icon_bueroklammer" /></svg>
</div>
<!-- end - versteckter lager-ordner für die svg daten -->
 
<div class="icon_box">
  <h3>Für V1 bis V4 SVG im HTML</h3>
  <div class="text_box">
    <div class="inline">Hier soll eine Büroklammer hin </div>
    <div class="inline" id="tmp_1"><svg class="svg-icon" ><use href="#icon_bueroklammer" /></svg></div>
  </div>
  <div class="text_box">
    <div class="inline">Hier soll eine Büroklammer hin </div>
    <div class="inline" id="tmp_2"><svg class="svg-icon" ><use href="#icon_bueroklammer" /></svg></div>
  </div>
</div>
 
<div class="icon_box">
  <h3>Für V1 bis V4 SVG einfuegen mit JS / JQ</h3>
  <div class="text_box">
    <div class="inline">Hier soll eine Büroklammer hin </div>
    <div class="inline" id="tmp_3"></div>
  </div>
  <div class="text_box">
    <div class="inline">Hier soll eine Büroklammer hin </div>
    <div class="inline" id="tmp_4"></div>
  </div>
</div>
 
<script>
  /*
   * svg mit JQuery einfuegen
   * script in footer
   */
  $('#svg_lager .svg-icon').clone().appendTo('#tmp_3');
  $('#svg_lager .svg-icon').clone().appendTo('#tmp_4');
</script>
{{template!==177.end}}