Duplicate icons appear on uikit

Navigation
1

I am doing a page of my curriculum to be able to have a presentation in web version. For this, I'm using the framework uikit 3 .

I was trying to do the parallax effect in the data grid, so I added jQuery so that everything worked correctly. The problem comes in that the icons are drawn in svg in duplicate.

Code: 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.1/css/uikit.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.40/js/uikit.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.40/js/uikit-icons.js"></script>



<div class="uk-card-footer uk-text-center uk-padding">
  <a uk-icon="ratio: 2; icon: twitter" class="uk-icon uk-text-primary uk-margin-right uk-margin-left" href="https://twitter.com/FNC_Soul">
    <svg width="40" height="40" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="2">
      <path d="M19,4.74 C18.339,5.029 17.626,5.229 16.881,5.32 C17.644,4.86 18.227,4.139 18.503,3.28 C17.79,3.7 17.001,4.009 16.159,4.17 C15.485,3.45 14.526,3 13.464,3 C11.423,3 9.771,4.66 9.771,6.7 C9.771,6.99 9.804,7.269 9.868,7.539 C6.795,7.38 4.076,5.919 2.254,3.679 C1.936,4.219 1.754,4.86 1.754,5.539 C1.754,6.82 2.405,7.95 3.397,8.61 C2.79,8.589 2.22,8.429 1.723,8.149 L1.723,8.189 C1.723,9.978 2.997,11.478 4.686,11.82 C4.376,11.899 4.049,11.939 3.713,11.939 C3.475,11.939 3.245,11.919 3.018,11.88 C3.49,13.349 4.852,14.419 6.469,14.449 C5.205,15.429 3.612,16.019 1.882,16.019 C1.583,16.019 1.29,16.009 1,15.969 C2.635,17.019 4.576,17.629 6.662,17.629 C13.454,17.629 17.17,12 17.17,7.129 C17.17,6.969 17.166,6.809 17.157,6.649 C17.879,6.129 18.504,5.478 19,4.74">
      </path>
    </svg>
  </a>
  <a uk-icon="ratio: 2; icon: github" class="uk-icon uk-text-primary uk-margin-right uk-margin-left" href="https://github.com/SoulApps">
    <svg width="40" height="40" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="2">
      <path d="M10,1 C5.03,1 1,5.03 1,10 C1,13.98 3.58,17.35 7.16,18.54 C7.61,18.62 7.77,18.34 7.77,18.11 C7.77,17.9 7.76,17.33 7.76,16.58 C5.26,17.12 4.73,15.37 4.73,15.37 C4.32,14.33 3.73,14.05 3.73,14.05 C2.91,13.5 3.79,13.5 3.79,13.5 C4.69,13.56 5.17,14.43 5.17,14.43 C5.97,15.8 7.28,15.41 7.79,15.18 C7.87,14.6 8.1,14.2 8.36,13.98 C6.36,13.75 4.26,12.98 4.26,9.53 C4.26,8.55 4.61,7.74 5.19,7.11 C5.1,6.88 4.79,5.97 5.28,4.73 C5.28,4.73 6.04,4.49 7.75,5.65 C8.47,5.45 9.24,5.35 10,5.35 C10.76,5.35 11.53,5.45 12.25,5.65 C13.97,4.48 14.72,4.73 14.72,4.73 C15.21,5.97 14.9,6.88 14.81,7.11 C15.39,7.74 15.73,8.54 15.73,9.53 C15.73,12.99 13.63,13.75 11.62,13.97 C11.94,14.25 12.23,14.8 12.23,15.64 C12.23,16.84 12.22,17.81 12.22,18.11 C12.22,18.35 12.38,18.63 12.84,18.54 C16.42,17.35 19,13.98 19,10 C19,5.03 14.97,1 10,1 L10,1 Z">
      </path>
    </svg>
  </a>
  <a uk-icon="ratio: 2; icon: linkedin" class="uk-icon uk-text-primary uk-margin-right uk-margin-left" href="https://www.linkedin.com/in/ramonguardialopez/">
    <svg width="40" height="40" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="2">
      <path d="M5.77,17.89 L5.77,7.17 L2.21,7.17 L2.21,17.89 L5.77,17.89 L5.77,17.89 Z M3.99,5.71 C5.23,5.71 6.01,4.89 6.01,3.86 C5.99,2.8 5.24,2 4.02,2 C2.8,2 2,2.8 2,3.85 C2,4.88 2.77,5.7 3.97,5.7 L3.99,5.7 L3.99,5.71 L3.99,5.71 Z"></path> <path d="M7.75,17.89 L11.31,17.89 L11.31,11.9 C11.31,11.58 11.33,11.26 11.43,11.03 C11.69,10.39 12.27,9.73 13.26,9.73 C14.55,9.73 15.06,10.71 15.06,12.15 L15.06,17.89 L18.62,17.89 L18.62,11.74 C18.62,8.45 16.86,6.92 14.52,6.92 C12.6,6.92 11.75,7.99 11.28,8.73 L11.3,8.73 L11.3,7.17 L7.75,7.17 C7.79,8.17 7.75,17.89 7.75,17.89 L7.75,17.89 L7.75,17.89 Z"></path>
    </svg>
  </a>
  <a uk-icon="ratio: 2; icon: mail" class="uk-icon uk-text-primary uk-margin-right uk-margin-left" href="mailto:[email protected]">
    <svg width="40" height="40" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="2">
      <polyline fill="none" stroke="#000" points="1.4,6.5 10,11 18.6,6.5"></polyline>
      <path d="M 1,4 1,16 19,16 19,4 1,4 Z M 18,15 2,15 2,5 18,5 18,15 Z"></path>
    </svg>
  </a>
</div>

Could someone tell me why the icons appear duplicated?

After a lot of research, removing the icon: name (eg icon: twitter ) from uk-icon is resolved. I still do not know why, but this is the solution. Does anyone know why?

    
asked by ramon guardia 16.03.2018 в 14:11
source

3 answers

1

In uikit, when you put icon: name (eg icon: twitter ) to an element, it will automatically insert the icon specified in SVG (use the Font Awesome icons for what it puts in the documentation).

It appears twice because you are duplicating the icon: on the one hand you use icon: twitter that is going to put the twitter icon, and then within the link you put the SVG of the twitter icon. One of the two is too much. You can remove the icon: name as you suggest in your question, and another option would be to leave it and remove the SVG that is inside the link (which will reduce the code of the page and make it more readable ... although that may be a matter of opinion ): 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.1/css/uikit.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.40/js/uikit.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.40/js/uikit-icons.js"></script>



<div class="uk-card-footer uk-text-center uk-padding">
  <a uk-icon="ratio: 2; icon: twitter" class="uk-icon uk-text-primary uk-margin-right uk-margin-left" href="https://twitter.com/FNC_Soul"></a>
  <a uk-icon="ratio: 2; icon: github" class="uk-icon uk-text-primary uk-margin-right uk-margin-left" href="https://github.com/SoulApps"></a>
  <a uk-icon="ratio: 2; icon: linkedin" class="uk-icon uk-text-primary uk-margin-right uk-margin-left" href="https://www.linkedin.com/in/ramonguardialopez/"></a>
  <a uk-icon="ratio: 2; icon: mail" class="uk-icon uk-text-primary uk-margin-right uk-margin-left" href="mailto:[email protected]"></a>
</div>
    
answered by 16.03.2018 / 14:48
source
0

I see that you have solved it but it looks like some kind of bug. Here they comment and solve it by adding single quotes:

link 

<a uk-icon="'ratio: 2; icon: twitter'"

I've tried your solution and it works

    
answered by 16.03.2018 в 14:36
0

Try removing the tags <path> and <svg> this is the result: 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.1/css/uikit.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.40/js/uikit.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.40/js/uikit-icons.js"></script>



<div class="uk-card-footer uk-text-center uk-padding">
  <a uk-icon="ratio: 2; icon: twitter" class="uk-icon uk-text-primary uk-margin-right uk-margin-left" href="https://twitter.com/FNC_Soul">
    
  </a>
  <a uk-icon="ratio: 2; icon: github" class="uk-icon uk-text-primary uk-margin-right uk-margin-left" href="https://github.com/SoulApps">
    
  </a>
  <a uk-icon="ratio: 2; icon: linkedin" class="uk-icon uk-text-primary uk-margin-right uk-margin-left" href="https://www.linkedin.com/in/ramonguardialopez/">
    
  </a>
  <a uk-icon="ratio: 2; icon: mail" class="uk-icon uk-text-primary uk-margin-right uk-margin-left" href="mailto:[email protected]">
   
  </a>
</div>
    
answered by 16.03.2018 в 14:52
Insert several data in one table at a time The bootstrap navbar 4 is not transparent