Как я могу загрузить значок, созданный в Adobe Illustrator, в свой документ HTML? - PullRequest
Новая
       8

Как я могу загрузить значок, созданный в Adobe Illustrator, в свой документ HTML?

2 голосов
/ 17 февраля 2020

Я могу экспортировать файл в формате SVG, но как мне на самом деле настроить его с эффектом наведения после этого? Я использую FontAwesome для большинства своих значков, но я не уверен, каким образом я получу свой собственный значок с тегом <i>, чтобы я мог изменить его так же, как и другие.

Ответы [ 4 ]

1 голос
/ 17 февраля 2020

в вашем CSS вы должны получить доступ к тегу SVG, тогда вместо использования цвета заливки для SVG, чем в вашем HTML просто используйте свой тег SVG. 

svg:hover{
fill:red;
}
<svg id="Layer_1" enable-background="new 0 0 512.843 512.843" height="512" viewBox="0 0 512.843 512.843" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m398.254 492.44c0 11.046-8.954 20-20 20s-20-8.954-20-20 8.954-20 20-20 20 8.954 20 20zm-288-19.964c-11.028 0-20-8.972-20-20v-246.489l166-151.439 166 151.439v72.147c13.732 3.002 27.121 7.419 40 13.19v-48.846l23.296 21.252 26.958-29.55-256.254-233.776-256.254 233.776 26.958 29.55 23.296-21.252v209.998c0 33.084 26.916 59.964 60 59.964h208.744l-39.957-39.964zm268-83.036c-24.131 0-50.247 11.167-68.241 29.143l-14.15 14.135 28.269 28.299 14.15-14.134c10.607-10.597 27.261-17.442 40.972-17.442 13.55 0 29.168 6.847 39.775 17.442l14.15 14.134 28.269-28.299-14.15-14.135c-17.996-17.977-45.074-29.143-69.044-29.143zm120.486-24.825c-32.822-33.002-75.379-51.177-119.833-51.176-44.463.001-87.021 18.176-119.834 51.178l-14.103 14.183 28.365 28.203 14.102-14.183c25.25-25.394 57.734-39.38 91.47-39.381 33.728-.001 66.213 13.985 91.471 39.383l14.103 14.181 28.362-28.207z"/></svg>
1 голос
/ 17 февраля 2020

вы можете использовать svg, который вы экспортировали. И когда вы хотите навести его и изменить цвет, вы можете изменить «заливку» тега svg o path! 

svg:hover path{
  fill:blue;
}
<svg fill="red" xmlns="http://www.w3.org/2000/svg" width="26.484" height="26.484" viewBox="0 0 26.484 26.484">
  <path id="price-tag" d="M26.484,5.206,21.266,0H14.692L12.1,2.583A19.584,19.584,0,0,0,.391,5.721a.469.469,0,1,0,.546.763A18.724,18.724,0,0,1,11.209,3.471L2.816,11.837l0,0L0,14.653,11.805,26.484l4.713-4.7a6.965,6.965,0,0,0,3.208.756A6.1,6.1,0,0,0,24,20.988a7.184,7.184,0,0,0,1.616-8.278l.868-.866V5.206ZM20.878.939,25.545,5.6v5.859L16.373,20.6c-1.917-1.375-2.5-3.954-1.64-7.336a.469.469,0,1,0-.91-.232c-1.215,4.773.418,7.127,1.877,8.238L14.624,22.34,4.148,11.842l8.3-8.278a14.369,14.369,0,0,1,6.125,2.191,1.824,1.824,0,0,0-.032.318A1.871,1.871,0,1,0,18.974,4.9a15.291,15.291,0,0,0-5.689-2.17L15.08.939ZM19.63,6.479a.469.469,0,1,0,.563-.751c-.145-.108-.291-.2-.436-.306a.907.907,0,1,1-.207,1C19.577,6.442,19.6,6.458,19.63,6.479Zm-18.3,8.177,2.156-2.15,10.479,10.5-2.156,2.15Zm22.008,5.669a5.881,5.881,0,0,1-6.117.761l7.687-7.667A6.168,6.168,0,0,1,23.336,20.324Z" fill="red"/>
</svg>
1 голос
/ 17 февраля 2020

Я считаю, что вы можете сделать что-то вроде этого:

Возможно, вы можете использовать SVG в обычном теге IMG:

https://caniuse.com/svg-img

<img src="/static/image.svg">

Затем можно добавить к значку обработчики событий:

https://developer.mozilla.org/en-US/docs/Web/Events

Я полагаю, что теперь это поддерживается.

0 голосов
/ 17 февраля 2020

Вы можете преобразовать его в PNG или JPEG-файл. а затем поместите его в документ html.

Используйте его как img-in на странице: <img src="/image.png"> или поместите его как иконку: <head> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> </head>

Примечание:

Для конвертации используйте онлайн-svg чтобы pct т. д. или используйте командную строку.

...