Css style link icon

Иконка-ссылка

Быстро создавайте стилизованные гиперссылки с помощью иконок Bootstrap или других иконок.

Вспомогательный компонент ссылки на иконку изменяет стили ссылок по умолчанию, улучшая их внешний вид и быстро выравнивая любое сочетание иконки и текста. Выравнивание задается с помощью встроенного стиля flexbox и значения по умолчанию gap . Мы стилизуем подчеркивание с помощью пользовательского смещения и цвета. Иконки автоматически имеют размер 1em , чтобы лучше всего соответствовать размеру шрифта связанного с ними текста font-size .

Ссылки на иконки предполагают, что используются Bootstrap Icons, но вы можете использовать любая иконка или изображение, которое вам нравится.

Если иконки носят исключительно декоративный характер, их следует скрыть от вспомогательных технологий с помощью aria-hidden=»true» , как мы сделали в наших примерах. Для иконок, которые передают значение, предоставьте соответствующую текстовую альтернативу, добавив role=»img» и соответствующий aria-label=». » к SVGs.

Пример

a class="icon-link" href="#">  svg class="bi" aria-hidden="true">use xlink:href="#box-seam">use>svg>  Иконка-ссылка a>

a class="icon-link" href="#">  Иконка-ссылка  svg class="bi" aria-hidden="true">use xlink:href="#arrow-right">use>svg> a>

Стиль при наведении

Добавьте .icon-link-hover , чтобы перемещать иконку вправо при наведении.

a class="icon-link icon-link-hover" href="#">  Иконка-ссылка  svg class="bi" aria-hidden="true">use xlink:href="#arrow-right">use>svg> a>

Кастомизация

Измените стиль ссылки иконки с помощью наших переменных CSS, переменных Sass, утилит или пользовательских стилей.

CSS переменные

При необходимости измените переменные CSS —bs-link-* и —bs-icon-link-* , чтобы изменить внешний вид по умолчанию.

Настройте transform при наведении, переопределив переменную CSS —bs-icon-link-transform :

a class="icon-link icon-link-hover" style="--bs-icon-link-transform: translate3d(0, -.125rem, 0);" href="#">  svg class="bi" aria-hidden="true">use xlink:href="#clipboard">use>svg>  Иконка-ссылка a>

Настройте цвет, переопределив переменную CSS —bs-link-* :

a class="icon-link icon-link-hover" style="--bs-link-hover-color-rgb: 25, 135, 84;" href="#">  Иконка-ссылка  svg class="bi" aria-hidden="true">use xlink:href="#arrow-right">use>svg> a>

Sass переменные

Настройте переменные Sass для ссылок на иконки, чтобы изменить все стили ссылок на иконки в вашем проекте на основе Bootstrap.

$icon-link-gap: .375rem; $icon-link-underline-offset: .25em; $icon-link-icon-size: 1em; $icon-link-icon-transition: .2s ease-in-out transform; $icon-link-icon-transform: translate3d(.25em, 0, 0); 

Sass API утилиты

Измените ссылки на иконки с помощью любой из наших утилит ссылок для изменения цвета подчеркивания и смещения.

a class="icon-link icon-link-hover link-success link-underline-success link-underline-opacity-25" href="#">  Иконка-ссылка  svg class="bi" aria-hidden="true">use xlink:href="#arrow-right">use>svg> a>

• Разработано и создано со всей любовью командой Bootstrap с помощью наших участников.
• Код под лицензией MIT, документация CC BY 3.0.
• Текущая версия 5.3.0.

Источник

Styling External Links with an Icon in CSS

For technical docs, blogs and articles it’s often a good idea to differentiate between links within the site (internal) and links to another site (external) as it can be jarring to be reading a blog or technical docs, clicking on a link and getting kicked to an external site unexpectedly.

A nice UX pattern is to display an ’external link’ icon next to external links. A simple way to implement this is using a CSS pseudo selector targeting only links which begin with http:// or https:// .

article a[href^="http"]::after, article a[href^="https://"]::after   content: "";  width: 11px;  height: 11px;  margin-left: 4px;  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");  background-position: center;  background-repeat: no-repeat;  background-size: contain;  display: inline-block; > 

If you’d like to exclude certain domains from displaying the icon (for example subdomains) you can set the icon to be hidden with something like:

article a[href^="https://example.com"]::after   display: none !important; > 

The CSS examples above are to be used within the section of a page, and isn’t intended for navbars, footers or elsewhere where the font size and colors may differ — where automating the appearance of these links may not be appropriate.

The icon used in the example above is Bootstrap’s ‘box arrow up-right’ icon , but feel free to switch to something else such as Font Awesome’s External-Link-Alt’ icon .

I used the neat URL-encoder for SVG service to convert the SVG code.

One gotcha is that images which are links have the icon appended which isn’t ideal. Unfortunately I don’t have an easy CSS-only fix for that. The :has() CSS relational pseudo-class would be perfect, but browser support is unfortunately nonexistent .

Источник

CSS Links

With CSS, links can be styled in many different ways.

Styling Links

Links can be styled with any CSS property (e.g. color , font-family , background , etc.).

Example

In addition, links can be styled differently depending on what state they are in.

The four links states are:

• a:link — a normal, unvisited link
• a:visited — a link the user has visited
• a:hover — a link when the user mouses over it
• a:active — a link the moment it is clicked

Example

/* unvisited link */
a:link color: red;
>

/* visited link */
a:visited color: green;
>

/* mouse over link */
a:hover color: hotpink;
>

/* selected link */
a:active color: blue;
>

When setting the style for several link states, there are some order rules:

Text Decoration

The text-decoration property is mostly used to remove underlines from links:

Example

a:visited text-decoration: none;
>

a:hover text-decoration: underline;
>

a:active text-decoration: underline;
>

Background Color

The background-color property can be used to specify a background color for links:

Example

a:link <
background-color: yellow;
>

a:visited background-color: cyan;
>

a:hover background-color: lightgreen;
>

a:active background-color: hotpink;
>

Link Buttons

This example demonstrates a more advanced example where we combine several CSS properties to display links as boxes/buttons:

Example

a:link, a:visited <
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
>

a:hover, a:active background-color: red;
>

More Examples

Example

This example demonstrates how to add other styles to hyperlinks:

Example

Another example of how to create link boxes/buttons:

a:link, a:visited <
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
>

a:hover, a:active background-color: green;
color: white;
>

Example

This example demonstrates the different types of cursors (can be useful for links):

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник