Как заменить значок png шрифтом? - PullRequest
Новая
       41

Как заменить значок png шрифтом?

0 голосов
/ 17 декабря 2018

Я хотел бы заменить значки "PNG" в приведенном ниже коде на "font-awesome"?Может кто-нибудь помочь, сделав замену для меня? 

<!-- share buttons -->
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url' target='_blank'><img src='http://i.imgur.com/YFXWd8p.png' title='Facebook'/></a>

<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' target='_blank'><img src='http://i.imgur.com/GyqTR6Z.png' title='Twitter'/></a>

<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank'><img src='http://i.imgur.com/m6DKSKK.png' title='G+'/></a>

Ответы [ 2 ]

0 голосов
/ 17 декабря 2018

Вам нужно будет добавить Font Awesome на свою страницу, поместив его внутри тега head вашей страницы: 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">


<!-- Include Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">

<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url' target='_blank'><i class="fab fa-facebook-f"></i></a>

<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' target='_blank'><i class="fab fa-twitter"></i></a>

<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank'><i class="fab fa-google-plus-g"></i></a>

Чтобы получить значок от Font Awesome, просто выполните поиск на их странице и включите их HTML, e.г: 

<i class="fab fa-facebook-f"></i>
0 голосов
/ 17 декабря 2018

Вы можете использовать приведенный ниже код для включения значка для ссылок.

Оберните элемент значка внутри тега привязки и предоставьте детали ссылки на тег. 

<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<h1>fa fa-address-book</h1>

<a href="https://jsfiddle.net/"><i class="fa fa-facebook"></i></a>
<a href="https://jsfiddle.net/"><i class="fa fa-twitter"></i></a>
<a href="https://jsfiddle.net/"><i class="fa fa fa-google-plus"></i></a>


</body>
</html>

Это будет ваш код 

 <a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url' target='_blank'><i class="fa fa-facebook"></i>></a>

<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' target='_blank'><i class="fa fa-twitter"></i></a>

<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank'><i class="fa fa fa-google-plus"></i></a>
...