Aligning an SVG with a paragraph in a Hugo theme

I am attempting to include an SVG of an Instagram icon along with some text within a paragraph in the footer section of my website. This specific footer is part of the spaced-blog Hugo theme.

My goal is to have the SVG align nicely with the text in the paragraph and also add some left padding. I have tried using CSS on the span that contains the SVG, but unfortunately it did not move the SVG accordingly. Below is the code snippet:

<footer class="footer p-2">
  <p class="m-b-s">{{ .Site.Title }}&nbsp;&copy {{ now.Format "2006"}}</p>
  <a href="">
    {{ partial "icons/instagram-logo.svg" . }}
  </a>
</footer>
htmlcss

Answer №1

Give this a shot:

<footer class="footer p-2">
  <p class="m-b-s">{{ .Site.Title }}&nbsp;&copy {{ now.Format "2006"}}</p>
  <a href="" style="display: block; padding-left: 20px;">
    {{ partial "icons/instagram-logo.svg" . }}
  </a>
</footer>

Answer №2

To ensure the icon aligns with the paragraph, simply move </p> after </a>.

<footer class="footer p-2">
  <p class="m-b-s">{{ .Site.Title }}&nbsp;&copy {{ now.Format "2006"}}
    <a href="">
      {{ partial "icons/instagram-logo.svg" . }}
    </a>
  </p>
</footer>

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

Three containers positioned within a parent container at 100% height

Within my div container (multiple_prizes in the fiddle), there are two other divs: one containing an upload button (upload_prize_img) and the other with 3 inputs (upload_prize_form). These two inner divs are positioned next to each other using bootstrap co ...

htmlcsstwitter-bootstrap

Using JQuery to Load Text Content from Textarea into an IFrame

Seeking a solution to transfer HTML textarea content into an IFrame upon button click. Any suggestions on achieving this functionality? Thank you in advance. Illustratively, when a user types Hello World in the textarea and clicks the submit button, the t ...

phpjqueryhtmliframe

Replace !important with JavaScript/jQuery when using animate()

I need to animate the background-position-x, but there is a background-position: 0 0 !important; set in the css that cannot be removed. Is it possible to work around this using JavaScript? My jQuery code is functioning as intended, but it is being overridd ...

javascriptjquerycss

What is the best way to include a component within a content-editable div in Vue.js?

Looking for the correct way to add a div inside a content-editable div on a click of a button in vue js. Here's the code I have been experimenting with: var ComponentClass = Vue.extend(AddTag) var instance = new ComponentClass({ propsData: { type: ...

javascripthtmlvue.jsappendcontenteditable

The execution of Javascript should be limited to when the tab or browser window is in focus

Similar Question: Detect If Browser Tab Has Focus I have developed a basic Java applet that is capable of capturing a client's screen. By using a small piece of JavaScript code, I can initiate the applet and capture the active screen image. Howe ...

javascriptjqueryhtml

Access a SQL database to retrieve a data value and seamlessly integrate it into an HTML document with the help of node

I am new to web development and currently facing a challenge in displaying SQL content on an HTML page. My stack includes Node.js, Express, and SQLite3. I have a folder named public containing HTML, CSS, and JS files. The objective is to retrieve a varia ...

javascripthtmlnode.jsexpress

Alter the text color when hovering over a div element

Is there a way to adjust the text color within a div when hovering over it? Even though everything else changes, the text color remains the same. See below for an example: <div className="hover:bg-blue-100 hover:border-blue-500 hover:text-blue-60 ...

cssreactjstailwind-css

Tips for creating a scrolling animation effect with images

I'm currently attempting to create an animation on an image using HTML/CSS. The issue I'm facing is that the animation triggers upon page load, but I would like it to activate when scrolling down to the image. Below is my snippet of HTML: <fi ...

javascripthtmlcss

Positioning a div absolutely while still keeping the integrity of the page layout

I'm in the process of setting up a blog page on my website with a design that includes two columns. The first column, known as .col_1, is fixed in width and is showcased in red. The second column, represented by .col_2, occupies the remaining space an ...

htmlcss

Ways to determine the height of a row within a flexbox

Is it possible to obtain the height of each row within a flexbox container using JavaScript? For instance, if there are 3 rows in the container, can I retrieve the height of the second row specifically? ...

javascripthtmlcssflexboxrow

The integration of <form> with jQuery Ajax error

I have come across this HTML form function FormSubmit (){ $.ajax({ url:'dotar.php', type:'post', data:$('form').serialize(), success:function(){ setTi ...

javascriptjqueryhtmlajax

Adjust iFrame to allow scrolling dynamically

I am currently facing a challenge with creating a non-scrollable iframe element using JavaScript. The function I need to call is within an iframe, and while it works on Firefox and Chrome, I also need it to work on Internet Explorer. My solution involves ...

jqueryhtmlcssxhtml

Guide on linking an id with a trigger function in HTML and JavaScript

In the snippet below, I aim to create a responsive feature based on user input of 'mute' and 'muteon'. Whenever one of these is entered into the textbox, it will change the color of linked elements with the IDs "text" and "text1" to red ...

javascripthtmlcsstelnet

Getting checkbox data into a textarea and storing textarea data in a variable

I need to display checkbox data in a textarea and then retrieve the edited data from the textarea using scope. The goal is to display checkbox data in the textarea, allow for editing, and then capture the updated data in {{newer}}. I have successfully inc ...

javascripthtmlangularjsforms

Navigating Django's Pagination feature alongside nested tabs requires a combination of careful planning

I am in the process of enhancing my template by adding pagination functionality. The template consists of Nested Tabs, each containing a table. My goal is to implement pagination for all tables within the inner tabs. Currently, I have successfully added p ...

pythonhtmldjangopagination

Is there a way to transform an HTML canvas into a tangible photograph?

I am currently working on converting HTML content into a real image on the client's side. After conducting research on canvas2base64, canvas2base64, and html2base64 on Stack Overflow, I have found that the generated images are always based on base64 c ...

javascriptjqueryhtmlcssjspdf

Tips for efficiently webscraping multiple pages with Beautiful Soup

I have been running my web-scraping script for quite some time, but it seems to be stuck on scraping only one URL. I intend to scrape five different URLs, and I am wondering if the issue lies with my loop getting stuck in an infinite loop. Furthermore, I ...

pythonhtmlloopsweb-scrapingbeautifulsoup

Event Triggering in CakePHP

I am struggling with the onChange event in this code snippet. I must have overlooked something because it's not functioning as expected. Can someone please point out my mistake? Your assistance is greatly appreciated: <td class="cellInput"> & ...

htmlcakephponchange

Ways to align a group of rows in the center of a document

I'm struggling to center these rows in the middle of the page. Using a Bootstrap template, I've been customizing it to suit my webpage. https://i.sstatic.net/E9hHq.png I want the rows to be centered just like the text above them. Originally a che ...

htmlcssbootstrap-4

Ways to display different pages within a single DIV

I have designed a main page featuring a navigation menu (with links to my sub-sites) and a content div where the sub-sites will be displayed. This setup is defined in my home.asp file. In addition, I have a folder named 'sub-site1' containing tw ...

htmlhreftarget