Link without link text is not working

Kirby 2 Solved ✅
1

i want to display social links . here given in image

but as is use kirby format to display that links , the links text is also get displayed.

here is my content code.
(link:http://www.facebook.com)

my snippet code

  • <?php echo $header->text()->kirbytext(); ?>

    • is there any alternative way?

    i have also tried https://github.com/getkirby-plugins/columns-plugin

    2

    What do you want to display instead of the link? Alternatively, you can show some other text:

    (link:http://www.facebook.com text: sometext)

    Or you would have to create a custom Kirbytag that shows an image instead.

    It’s probably a better idea to generate those links in the template and just put the urls into an structure field with URL fields or multiple URL fields in the site settings.

    3

    i dont want to display any link text that is why i have also tried to use (link:http://www.facebook.com) and link:http://www.facebook.com but in both it takes url as link and display it. for example if i write (link:http://www.facebook.com) then it displays www.facebook.com as link text.

    4

    The (link: ) tag also has a class parameter. So if you write

    (link: http://www.facebook.com text: fb class: facebook)

    You can style the link with CSS to show the facebook logo or some other image instead of the text.

    a.facebook {
    text-indent: -9999px;
    background-image: url(../images/facebook-logo.png);
    height: 50px;
    width: 50px;
}

    But as @texnixe wrote earlier, it would probably make more sense to generate the links in the template or create a custom kirbytag for social icons.

    5

    but if i keep text section empty as you have written it not affects. same problem arise that link text displayed.

    6

    Keeping the text parameter empty or not mentioning the text parameter at all simply uses the url as the text. And it’s fine like that for most use cases. You can simply link to websites without typing the url twice.

    For your use case there are four options:

    1. Hard coding the social media in the template for the header
    2. Using a structure field in e.g. the site options
    3. Using CSS to hide the text and display an image
    4. Writing a custom kirbytag for social media links without text

    I’d personally just hard code it. I suppose the social media links don’t change that often.

    7

    I’d also go for option 1 or 2, they are the cleanest solutions, option 1 if the links are not likely to change, option 2 if you want some more flexibility. No reason to use a Kirbytag at all for your use case.

    8

    Every link needs a text label, for accessibility and SEO.

    For instance with a icon link:

    <a href="https://www.instagram.com/username">
  <img src="/assets/icons/instagram.svg" alt="Follow us on Instagram">
</a>

    Here the image’s alt attribute acts as the link’s text.
    I recommend against techniques that rely on background images. They’re brittle and depending on how you visually hide the text, it may never be read by a screen reader.

    For inline SVG (which enables things like color changes on hover, animations etc.), you could use the title element:

    <a href="https://www.instagram.com/username">
  <svg width="40" height="40">
    <title>Follow us on Instagram</title>
    <path d="…"></path>
  </svg>
</a>

    All of this is indeed easier to manage with entries in site.txt.

    9

    Yes, you can use an image with a link:

    (image: facebook.jpg link: http://www.facebook.com)

    if you want!

    Change the image, if you need.

    Good luck!

    10

    But as written above, please don’t use image links without alt attributes.