Welcome to TalkGraphics.com
Results 1 to 3 of 3
  1. #1
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,706

    Info Free Resource - Boxicons

    Xara suggests Boxicons in https://www.xara.com/free-design-resources/.
    It then stated:
    How to use the resources in Xara
    Open a website from the list (or others)
    Choose your free image, illustration & more
    Download it
    Import/add it to your Xara document & customize it
    For Boxicons, it singularly fails to describe the power Boxicons and Xara together can achieve.

    In your Website > HTML Code (body), put:
    Code:
    <script src="https://unpkg.com/boxicons@latest/dist/boxicons.js"></script>
    In your Website > HTML Code (head), put:
    Code:
    <linkhref='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css'rel='stylesheet'>
    Before even considering the Icons and Font, BoxIcons that are now accessible, you can apply ClassNames (with punch) to your design shapes.

    Pick any one of these: bx-spin,bx-tada,bx-flashing,bx-burst,bx-fade-left and bx-fade-right
    Add a special Name htmlclass="bx-..." to as few or as many shapes on your design page and Preview.

    Append -hover and with htmlclass="bx-...-hover", you now have a hover event.

    (+) Fuller details of usage: boxicons.com/usage/.

    Unless you are building some HTML in a Placeholder, the use of embedding icons with <box-icon type="logo" name="facebook-square"></box-icon> or <i class='bx bxl-facebook-square'></i> is a bit of a hassle.
    Instead, back in Boxicons, just pick an icon, click the SVG Code Button and add that into a Placeholder to get a high definition, image-free shape.
    Don't bother with the animation part offered, use the approach I have just described.
    Change the width and height to 100% to get a scalable shape.

    Code:
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill:rgba(0, 0, 0, 1);transform:;-ms-filter:"><path d="M19,7.5C19,6.121,17.879,5,16.5,5H8V2H5v3H2v3h14v14h3v-3h3v-3h-3V7.5z"></path><path d="M8,10H5v6.5C5,17.879,6.121,19,7.5,19H14v-3H8V10z"></path></svg>
    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  2. #2
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,886

    Default Re: Free Resource - Boxicons

    Excellent Acorn. Even I understood that.
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  3. #3
    Join Date
    Apr 2015
    Location
    Germany
    Posts
    927

    Default Re: Free Resource - Boxicons

    Thanks for sharing!

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •