I am making a page of my resume to be able to have a presentation in a web version. For this, I am using the uikit 3 framework .
I was trying to do the parallax effect on the data grids, so I have added jQuery to make everything work correctly. The problem is that the icons are drawn twice in svg.
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
(pe icon: twitter
) from uk-icon fixed it. I still don't know why, but this is the solution. Does anyone know why?
In uikit, when you put
icon: name
(peicon: twitter
) to an element, it will automatically insert the icon specified in SVG (they use Font Awesome icons because of what it says in the documentation).It appears twice because you are duplicating the icon: on the one hand you use
icon: twitter
the twitter icon, and then inside the link you put the SVG of the twitter icon. One of the two is left over. You can remove theicon: name
as you suggest in your question, and another option would be to leave it and remove the SVG inside the link (which will reduce the code of the page and make it more readable... although that may be a matter of opinion):I see you've fixed it but it seems to be some kind of bug. Here they comment it out and fix it by adding single quotes:
https://github.com/uikit/uikit/issues/2886
I have tried on your solution and it works
Try removing the tags
<path>
and<svg>
this is the result: