Having trouble with Octicons - am I making a mistake somewhere? (HTML/CSS/JS)

I am fairly new to working with html and am currently experimenting with octicons. Following a tutorial I found on YouTube, I downloaded version 10.1.10 of octicons from GitHub and placed them in the main app folder in vs code.

To test it out, I opened one of the icons (a briefcase icon) in VS code and copied the path that appeared in the IDE. I then pasted this path into a span element as shown below:

<div class = "input-group">
    <span class = "input-group-addon"><span class = "<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" 
        d="M7.5 1.75C7.5.784 8.284 0 9.25 0h5.5c.966 0 1.75.784 1.75 1.75V4h4.75c.966 0 1.75.784 1.75 1.75v14.5A1.75 1.75 0 0121.25 22H2.75A1.75 1.75 0 011 20.25V5.75C1 4.784 1.784 4 2.75 4H7.5V1.75zm-5 10.24v8.26c0 .138.112.25.25.25h18.5a.25.25 0 00.25-.25v-8.26A4.233 4.233 0 0118.75 13H5.25a... Icon </svg>"></span></span>
    <input type = "text" class = "form-control" name = "first name" placeholder="First Name">
</div>

However, when I run this code, instead of showing the briefcase icon, it displays "> next to the First Name input field. I'm not sure what I did wrong since it seemed to work for the person in the YouTube video. It could be an issue with where I saved the file or there might be a problem with the process itself - I can't quite figure it out.

If it helps, I am using Mac OS. Any suggestions or guidance would be greatly appreciated!

javascripthtmlcsspython-3.xvisual-studio-code

Answer №1

When inserting the svg into a class attribute (i.e. within the quotes of a <span class=""):

<!-- (Your current code) -->
<span class="input-group-addon">
    <span class="<svg>...</svg>">"></span>
</span>

This will result in malformed HTML. To fix this, remove the <span class=" and "> that enclose your svg:

<div class="input-group">
    <span class="input-group-addon">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path fill-rule="evenodd"
                d="M7.5 1.75C7.5.784 8.284 0 9.25 0h5.5c.966 0 1.75.784 1.75 1.75V4h4.75c.966 0 1.75.784 1.75 1.75v14.5A1.75 1.75 0 0121.25 22H2.75A1.75 1.75 0 011 20.25V5.75C1 4.784 1.784 4 2.75 4H7.5V1.75zm-5 10.24v8.26c0 .138.112.25.25.25h18.5a.25.25 0 00.25-.25v-8.26A4.233 4.233 0 0118.75 13H5.25a4.233 4.233 0 01-2.75-1.01zm19-3.24a2.75 2.75 0 01-2.75 2.75H5.25A2.75 2.75 0 012.5 8.75v-3a.25.25 0 01.25-.25h18.5a.25.25 0 01.25.25v3zm-6.5-7V4H9V1.75a.25.25 0 01.25-.25h5.5a.25.25 0 01.25.25z" />
        </svg>
    </span>
    <input type="text" class="form-control" name="first name" placeholder="First Name">
</div>

Answer №2

When you visit the website and select the desired Icon, make sure to download the SVG file, place it in your working directory, and then link it within your HTML code like this

<img src="./image.svg" alt="alternative text(you can choose any)" />

You currently have the incorrect code. Here is how it should appear:
<div class="input-group">
    <span class="input-group-addon"><span>
            <svg xmlns=" http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                <path fill-rule="evenodd"
                    d="M7.5 1.75C7.5.784 8.284 0 9.25 0h5.5c.966 0 1.75.784 1.75 1.75V4h4.75c.966 0 1.75.784 1.75 1.75v14.5A1.75 1.75 0 0121.25 22H2.75A1.75 1.75 0 011 20.25V5.75C1 4.784 1.784 4 2.75 4H7.5V1.75zm-5 10.24v8.26c0 .138.112.25.25.25h18.5a.25.25 0 00.25-.25v-8.26A4.233 4.233 0 0118.75 13H5.25a4.233 4.233 0 01-2.75-1.01zm19-3.24a2.75 2.75 0 01-2.75 2.75H5.25A2.75 2.75 0 012.5 8.75v-3a.25.25 0 01.25-.25h18.5a.25.25 0 01.25.25v3zm-6.5-7V4H9V1.75a.25.25 0 01.25-.25h5.5a.25.25 0 01.25.25z" />
            </svg></span>
        <input type="text" class="form-control" name="first name" placeholder="First Name">
</div>

I trust this information was beneficial :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is Vanilla JS or React the Superior Choice for Building NPM Packages?

As a newbie with a few ideas for npm packages, I could use some guidance. I've noticed that tutorials on YouTube often focus on writing packages in vanilla JavaScript, while some GitHub repositories show packages created with React. My objective is t ...

javascriptreactjsnpmpackage

Retrieve the chosen option from the drop-down menu

Can anyone assist me in extracting the selected value from a combo box and then displaying it? Below is a snippet of code that demonstrates what I have attempted so far. <label class="col-sm-4 control-label">Issue Type:</label> <div> ...

angularjshtmlrest

Divs sliding out of alignment

I am experiencing an issue with the scrolling behavior of a wrapper div that contains two nested divs. Specifically, when I scroll the wrapper horizontally on Android devices, the header section and content section seem to be out of sync and there is a not ...

javascriptandroidcssscroll

Using PHP to ascertain the requested dataType or responseType from the client

My ajax request is fairly simple: $.post('server.php',data, function (json) {console.log(json)},'json'); I have configured jQuery to expect json data based on the dataType setting. Question: Is the dataType parameter equivalent to re ...

javascriptphpjqueryajaxhttp-headers

Is it possible to send form data using the file upload function?

I've successfully implemented a file upload feature with a progress bar, and the file gets uploaded in fileUpload.php. function fileSelected() { var file = document.getElementById('fileToUpload').files[0]; if (file) { var fil ...

javascriptphpjqueryformsxmlhttprequest

What is the best way to create a Snap.svg map using AngularJS?

I am in the process of creating a web interface for an online board game. My goal is to load a Snap.svg map using Snap.load asynchronously. Once the map is loaded, I intend to attach a watch to a scope property and apply colors to the map based on that pr ...

javascriptangularjssvgcoffeescriptsnap.svg

We have successfully integrated the Wijemo event calendar with our Angular controller

I've been attempting to connect the wijeval to an array of events within an AngularJS Controller. Here's what I've attempted so far: View: <div ng-app="MyApp" ng-controller="MainController"> <wijevcal viewtype="week" eventsdat ...

javascriptangularjscomponentonewijmo

Can the contents of a JSON file be uploaded using a file upload feature in Angular 6 and read without the need to communicate with an API?

Looking to upload a JSON file via file upload in Angular (using version 6) and read its contents directly within the app, without sending it to an API first. Have been searching for ways to achieve this without success, as most results are geared towards ...

javascriptangulartypescriptangular6

Error Looping Occurs when Recursively Calling RestAPI to Render Data on Datatables

I am facing the challenge of exceeding the 5000 view limit in SharePoint Online and need to implement recursive RestAPI calls to overcome this limitation. The code I have currently goes into a loop after generating the initial 5000 entries from my SharePoi ...

javascriptarraysjsonsharepoint-onlinerest

Can you explain the distinction between assigning a string value to a variable in Python 3 with and without using parentheses?

greeting = "Greetings from the digital world!" vs greeting = ("Greetings from the digital world!") After conducting several tests, it seems that both declarations yield the same result. I am a beginner in Python and curious to know if ...

pythonpython-3.xstring

How accurate can CSS3 opacity measurements be?

Recently, I've been creating special effects with opacity transitions. But now I'm wondering if using unrounded values for opacity is a reliable approach. It seems that when the precision level exceeds what JavaScript can handle, browsers round ...

javascriptcss

What is the best way to position and align an angle with the axis of a moving 3D figure?

My latest project involves a rotating planet, specifically Saturn with its iconic rings. To capture the best view of this celestial marvel, I configured the camera with precision: var camera = new THREE.PerspectiveCamera(45, width / height, 0.05, 1000); ...

javascript3dthree.js

Pictures not sizing properly within the grid layout

When attempting to create a simple grid with square images, I encountered an issue where the images were overlapping each other and appearing too large when directly placed inside the grid. In order to resolve this problem, I explored using CSS to adjust t ...

htmlcsscss-grid

Invalid file format for product images in Magento version 1.9.0.1

Every time I try to upload an image in the product option, Magento 1.9.0.1 gives me an error saying "Disallowed file format." ...

javascriptphporaclemagento

Personalize the design of bootstrap buttons

I am looking to increase the size of my bootstrap buttons beyond btn-lg. Here is my current code: HTML Whenever I add a new class with padding to the anchor tags, it ends up looking strange. https://i.sstatic.net/3AFPI.png However, this is the desired ...

htmlcsstwitter-bootstrapbootstrap-4

The dynamic data graph generated by HIGHCHARTS Areaspline is not as effective as expected

I need help creating a Dynamic Areaspline graph, but the result is coming out strangely. Does anyone have any ideas on how to fix this and get a smooth series? Here is an example of the issue: http://jsfiddle.net/mchc59nb/1/ chart: { ...

javascriptjqueryhighcharts

I can't find the comment bar on Facebook because it's hidden behind the social

Seeking assistance with an issue we're experiencing. After someone clicks 'Like' on a product page, the comment section that drops down is getting hidden behind the Twitter and Google social buttons. I've tried adjusting the overflow s ...

htmlcssfacebookmagento

Using CSS styling to dictate how browsers display web content, specifically through setting font size measurements in EM

On different mobile devices and various browsers such as Internet Explorer and Mozilla, the font size in some divs does not appear consistent. Specifically, on a Samsung Galaxy S6. I am using EM units: I know it may not be ideal but I prefer this method a ...

csscross-browserfont-size

Using CSS flex with a column layout that does not expand to the full width of its parent

My vertical navigation bar includes the following list items: <ul class="nav"> <li> <div> <i class="fa fa-tachometer"></i> <a href="#" class="noselect">Dashboard</a> </div> ...

htmlcssflexbox

Unable to access the drop-down menu with a single click

The webpage I created using angularjs and bootstrap does not include ui-bootstrap. Within the page, there is a drop-down list and an iframe. An issue arises when the drop-down list is open and clicking on the iframe does not automatically close the list. ...

javascriptjqueryangularjstwitter-bootstrapdrop-down-menu