Font Awesome Icon Code Generator Tool

Unknown · 24/12/24

Font Awesome Icon Code Generator Tool

Font Awesome Icon Generator Tool

Choose an icon: Select an icon Camera Heart User Car Bell Book Cog Cloud Envelope Globe Home Key Music Phone Star Generate Code

The basic HTML page that includes CSS and JavaScript to generate Font Awesome icon codes dynamically.

Explanation:
1. HTML: Provides a dropdown menu to select Font Awesome icons and a button to generate the code.
2. CSS: Styles the page for better appearance, including layout and font settings.
3. JavaScript: Handles the logic for updating the icon preview and code output based on user selection.

Script Code Font Awesome's free CDN for easy integration.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Awesome Icon Code Generator</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        select, button {
            margin-top: 10px;
        }
        .icon-preview {
            font-size: 50px;
            margin: 10px 0;
        }
        .code-output {
            font-family: monospace;
            background: #eee;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Font Awesome Icon Code Generator</h1>
        <label for="icon-select">Choose an icon:</label>
        <select id="icon-select">
            <option value="">Select an icon</option>
            <option value="fa-solid fa-camera">Camera</option>
            <option value="fa-solid fa-heart">Heart</option>
            <option value="fa-solid fa-user">User</option>
            <!-- Add more options as needed -->
        </select>
        <button onclick="generateCode()">Generate Code</button>
        <div class="icon-preview" id="icon-preview"></div>
        <div class="code-output" id="code-output"></div>
    </div>

    <script>
        function generateCode() {
            const select = document.getElementById('icon-select');
            const selectedValue = select.value;
            const previewDiv = document.getElementById('icon-preview');
            const outputDiv = document.getElementById('code-output');

            if (selectedValue) {
                previewDiv.innerHTML = `<i class="${selectedValue}"></i>`;
                outputDiv.textContent = `<i class="${selectedValue}"></i>`;
            } else {
                previewDiv.innerHTML = '';
                outputDiv.textContent = '';
            }
        }
    </script>
</body>
</html>

Feel free to customize the icon options in the dropdown or modify the styling as needed.

متابعة القراءة...

Font Awesome Icon Code Generator Tool

Unknown